This is an example of what the grid view looks like in Storefront on mobile

By default, the desktop view of the Storefront theme shows a grid of products, where each row has 4 products in it.

The mobile view, on the other hand, is a list view where each row only has 1 product. The mobile view is a bit more airy as well, which looks great, but causes a lot of scrolling effort to view all of the products.

To make it quicker and easier for users to browse through products, you could consider changing the list view to a grid view on mobile.

Let’s look at the code

I was able to make this change with just a bit of CSS, and support back to IE10. Not too shabby. Especially considering my friend’s website has only had one IE9 order this entire year. 😱

The first selector (.products) says that we’re going to use flex to handle the layout. The second selector (ul.products:before, ul.products:after) is to address a flex-wrap bug in Safari. And the last selector (ul.products li.product) is what makes each product 50% of the width.

I was recently working on integrating Affiliate WP into one of my friend’s sites. And after I set it up, I was a bit disappointed that the affiliate users would have a separate account page from the WooCommerce users.

For example, users that were checking order history, saved payment details, and more would go to /my-account. But, users that wanted to check their affiliate details would need to go to /affiliates.

The ideal situation seemed to be to add the affiliate page within the WooCommerce “My Account” page. So, I set about on a journey to make that happen.

Some discovery

It’s always nice to find out if others have solved the problem already. And I was in luck, as there were a few tutorials out there that discussed how to add menu items to the WooCommerce “My Account” page 😄 :

Tom writes great stuff, but this article I found of his is simply to add a menu item to the WooCommerce “My Account” page. It does not discuss how to add content to the tab. So, I worked mainly off of Rodolfo Melogli’s article which does cover how to add content to the tab.

What I ended up with

With just a few tweaks, I was able to integrate Affiliate WP in to the WooCommerce “My Account” page. I’ve included some high-level comments that explain what each section is for.

Final result

Here are a couple of screenshots demonstrating what this should look like when you’re done.

This is the Affiliate WP URLs tab, integrated in to the WooCommerce “My Account” page.

This is the Affiliate WP statistics tab, integrated in to the WooCommerce “My Account” page.

Closing thoughts

As you can see, just this little bit of code gives us a pretty good visual integration between Affiliate WP and WooCommerce. I found myself asking if Affiliate WP should do this within the plugin, but with how many integrations that they handle, I’m not sure if it would make sense for them.

In the future, and after more testing to make sure that nothing breaks if one of the plugins is not enabled, perhaps this could be factored in to a plugin. Until then, you should be able to get this working by copying the code in to a small plugin on your site or throwing it in the functions.php of your theme.

Automattic, which owns WordPress and a number of other web development and publishing tools, has signed a pledge not to help build a Muslim registry. The company’s founder and CEO, entrepreneur Matt Mullenweg, signed the pledge on behalf of his entire company today.

At this point, if you were to reload your home page and check the source for your header image, you’ll notice that the image has something like i1.wp.com in front of it. This means that our little snippet worked. 💪

What I haven’t yet figured out is how to properly set the width and height arguments for the image since we only have the URL and not an image attachment. ¯_(ツ)_/¯