Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Woocommerce shop page custom template

As I understand by default Woocommerce shop page uses product archive template. What I am looking for, is to use a custom template for shop page.

Here is what I did:

  1. Create template "my-shop"
  2. Create page "My shop" -> choose template "my-shop"
  3. Choose "My shop" as Woocommerce shop page

But none of the changes I made to "my-shop" template are present on the shop page.

What am I missing here? I would not like to change product archive itself, just the shop page.

Is there a way to disable product archive from being a default for shop page?

Thanks

like image 628
Silver Ringvee Avatar asked May 24 '16 08:05

Silver Ringvee


People also ask

How do I customize my WooCommerce shop page template?

To customize your shop page with the customizer, click Appearance » Customize from your WordPress dashboard. From there, click WooCommerce » Product Catalog to see the customization options. Next, click the 'Shop page display' dropdown menu and choose a layout.

Which template is used for shop page in WooCommerce?

The WooCommerce shop page uses a template called archive-product. php. This template can be found in the /wp-content/plugins/woocommerce/templates/ directory. If you're using a custom theme, the template may be located in a different directory.


2 Answers

I know it's too late and you may have figured it out by now. In any case, the changes that you would like to make to the WooCommerce Shop Page need to be done in the archive-product.php and it would be safer to create a child theme and do these changes. Making enhancements and customizations in a Child theme is best practice so that you can update the parent theme at any time and it won't affect your store.

I hope this helps, for more information on how you can use WooCommerce short-codes to customize your store can be found here.

like image 94
Blue Grass Avatar answered Nov 14 '22 22:11

Blue Grass


To add to Silver Ringvee's answer - he used is_page but that only works on wordpress pages. For woocommerce you need to use something like is_woocommerce() . See Woocommerce conditional tags page.

My example code uses the is_shop conditional tag as that was the page you wanted to change. the code get_template_part( 'content', 'shop' ); will call the file content-shop.php in your theme root folder. This code is to be added at the top of wp-content\themes\*theme*\woocommerce\archive-product.php that you can copy from wp-content\plugins\woocommerce\templates\archive-product.php

You can add it just before get_header( 'shop' ); line 23 in my file - and the entire page will be drawn from your template. If you want to keep the header of the shop page, then put this code after the get_header code. Remember to include a footer in your file as well

if (is_shop()) {
 get_template_part( 'content', 'shop' );
} else  {  
#normal archive-product code here
}
like image 3
Jon Avatar answered Nov 14 '22 23:11

Jon