It depends. In what way would you like to change the layout?
Hi @lorro
I want to change the design of the grid which is generated. Right now it looks like this:
View post on imgur.com
I want it to look alike this:
View post on imgur.com
Which is a loop I have made.
Do you know how I can change the design?
Best regards,
It can be done with remove_action() calls to remove the elements you don’t want. These are the default ones but sometimes they can vary by theme. If these don’t work, look at:
wp-content/themes/your-theme/woocommerce/content-product.php
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
It could also be achieved with some custom css to hide the unwanted elements, but I would need to the address of the page to be able to examine the markup and styles with browser tools.
Hi @lorro
Thanks a lot for the code, but I need to make the entire styling, setup etc identical. Is there no way I can just make a template like I’ve done for product archive?
Just removing elements is not enough to make the styling the same
Thanks in advance 🙂
If you are comfortable using code to remove the unwanted elements, that would be a good start. The rest can be styled with custom css. For help with that I would need to the address of the page to be able to examine the markup and styles with browser tools.
To make a new template, copy content-product.php to
themes/your-child-theme-name/woocommerce/content-product.php
and edit the copy.
If your theme already has a customised template you will find it at
themes/your-theme-name/woocommerce/content-product.php
if so, copy that to your child theme and edit it.
I suspect that even with a custom template, some fine tuning with css will be needed.
Hi again @lorro
The link is: Stilx.dk
If you would like to help with that, I would be very appreciative! 😀
To make the design of the products under, for instance, “Udendørsbrusere” I just used the Templates -> Theme Builder -> Products Archive
And then Woocommerce automatically updated the design based on that. I just need that design to be the same on the front page, but for some reason it doesn’t work… :/
Is there really no way to not just tell woocommerce to use the same design?
Best regards,
-
This reply was modified 5 years ago by
alestrup.
@lorro The default products archive design is the exact same as what is shown on the front page. I find it weird that when I change products archive, the design on the front page doesnt also get changed…
If you look at the body element tags, the home page body tag does not have the .woocommerce or .woocommerce-page classes, but the archive page body tag does. This difference in classes is why the styles for the archive page will not work on the home page.
If I have understood, you want to remove some elements from the archive page product blocks. Please try the code to remove the unwanted elements. That’s the first step. Then we can look at some custom css to make them similar to the product blocks on the home page.
I don’t think a custom template is the way to go.
We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.
