Ryan Ray

Hi @lionelbachelart,

Welcome to WordPress and thanks for trying out Storefront and WooCommerce!Getting to your issue, can you help me locate what appears to be broken icons? I took a look around the site and I’d seen a few icons, like for the cart, home icon in breadcrumbs, comments, etc…

Link to image: https://cld.wthms.co/uK4J12

Hi @frankliuao,

This was indeed done using NPM & Grunt as the task runner. Refer to our contributing guidelines here if you wanted to help shape Storefront.

What I would add though is that I wouldn’t recommend modifying the core files of Storefront to begin with. What would be better in the long term is to create a child theme or use plugins/any other method to modify the site.

I say that because if you modify Storefront to fit your clients needs and then a Storefront release comes out (as they will), you’ll need to redo or re-apply all of those changes after updating as that update will overwrite any changes made to the theme directly.

The theme, WooCommerce, and WordPress itself should provide you with plenty of ways to modify their default behavior without modifying the core files of those products themselves. 🙂

• This reply was modified 7 years ago by Ryan Ray.

Hi @kristinubute,

I think one of the simpler, and maybe only, methods would be to use CSS with the appropriate media query.

The media query can target certain screen sizes, AKA devices. Try this out in the Additional CSS section or your favorite way to add CSS to your site.

@media screen and (max-width: 768px) {

	.menu-toggle {
		display: none;
	}

}

Hi there @sandwebdesign,

Those functions/actions you mentioned are used in the homepage page template in Storefront. They add, as their names describe, different sections to the homepage. 🙂

Link to image: https://cld.wthms.co/hRwXNA

Perhaps you have those mixed up with other filters you’ve used to alter the number of columns on the shop page and the number of products per page? For example this would be the filter to change the number of columns per row.

add_filter('loop_shop_columns', 'loop_columns', 999);
if (!function_exists('loop_columns')) {
	function loop_columns() {
		return 3; // 3 products per row
	}
}

Could that be the case? Either way, it seems like you are wanting to make those same changes now? You’d like to change the number of products per row and number of products per page? Let me know if I’ve misunderstood, thanks!

Hi @ninadovetail,

Ok got it, glad I understand now. In this case I think I would look at using the new editor and create a new home page. It currently looks like that http://store.dovetaillearning.org is both the home page and the default shop page setup in WooCommerce. It also looks like it is set to just show your categories.

I would create a new home page and use blocks there to rebuild it. That lets you easily enter a paragraph block like you have now in your shop page, then you can add a heading block, a category block, then a separator block. It could look something like this…

Link to image: https://cld.wthms.co/ulnUB6

On the backend this is what I’ve done. I’ve added paragraph blocks, then the heading block and centered it. Then comes the shortcode block to enter your categories of choice. I used the following format.

[product_categories ids="16,17,18,19" columns="4"]

It is getting the specific categories by their ID number, which you can find by going to WooCommerce > Categories and then hover over any category. I think in most browsers you’ll see this URL preview somewhere. But if not you can just edit the category and in your address bar you’ll find the ID.

Link to image: https://cld.wthms.co/JK0lI7

&

Link to image: https://cld.wthms.co/4ZWHe3

FINALLY, I follow that all up with the separator block.Hopefully that helps, makes sense, and is one option you can use. 🙂

• This reply was modified 7 years ago by Ryan Ray.
• This reply was modified 7 years ago by Ryan Ray.

Hi @alexjourdan,

While you could hide this with CSS, I would recommend a more “correct” method. Now I say correct, but there’s truly not a wrong or right. I only mention this as with CSS you are just hiding that information. It is still loaded via PHP but no one sees it.

I prefer to actually remove the code from ever loading, and lucky enough this part of Storefront is loaded in via an action which means we can remove that action. 🙂

Following this method, I would use a plugin like Code Snippets to add this to your site, or use your child themes functions.php file.

function remove_storefront_post_meta() {
	remove_action('storefront_post_header_before', 'storefront_post_meta', 10);
	
};

add_action( 'init', 'remove_storefront_post_meta');

If you prefer CSS, try the following added to the Additional CSS section of the Customizer or in your preferred location.

span.posted-on,
span.post-author,
span.post-comments {
    display: none;
}

• This reply was modified 7 years ago by Ryan Ray.
• This reply was modified 7 years ago by Ryan Ray.

@jpb10,

Best of luck! My current preferred editor is Atom, and I know it has packages made for compiling SCSS if that helps any. 😛