I'm currently adapting the WooCommerce Storefront theme for a client and am struggling to change the layout for the woocommerce "products" widget that displays a list of given products. I believe the template for this is "plugins/woocommerce/templates/content-widget-product.php".
However, adding it to my theme's "themes/mytheme/woocommerce/content-widget-product.php" directory and adjusting it doesn't appear to work.
Essentially I need to change the default structure from this:
To This:
I must be missing something obvious, surely?
OK, so within WooCommerce there is "content-widget-product.php" which returns a product's details for one type of widget.
There is also "content-product.php" which returns a product for their main [Products] shortcode loop... the main loop that gets used on the shop page, etc.
Editing the content-product.php file and overriding its related WooCommerce functions achieved what I needed.
Hopefully, this might help someone else in the future and save a few hours of hunting around!
Related
The question has been asked here before, but I found all solutions insufficient for what I’m trying to achieve.
The usual answer is to overwrite archive-product.php in your theme. However if you do this, you also overwrite the design for category pages.
For example with product categories you can overwrite a specific product_category with product-cat-{slug}.php I wonder if there is a possible way to just overwrite the main shop page of Woocommerce.
When overriding templates, to make changes only for specific product archive pages, you can use WooCommerce (or WordPress) conditional tags. So in your case you will use is_shop(), inside your template code, a bit like:
if ( is_shop() ) {
// Here add your customized code for shop pages
} else {
// Here you keep original template code (optional)
}
Related documentation:
Available WooCommerce conditional tags
Template structure & Overriding templates via a theme
I feel like this should not be very difficult to do however I am having great difficulty figuring it out, thanks in advance for your help on this matter.
I am creating a Woo-commerce Store for my website and am using a custom Wordpress Theme I am building myself. I have installed Woo-commerce and set up the default pages including the Shop Page. I would like to add a sidebar to my Shop page (i.e where I display all products) and have this same sidebar appearing on all category and other sub pages from the shop page to assist in navigating my shop. In the sidebar I will add product filtering (to add some context) and I understand how to achieve this by adding widgets.
My issue however is I am unsure how to add and display a sidebar on the Shop and sub category pages. I do not want to have to overwrite the default php to achieve this (if possible) and would like to complete this as simply as possible however I have built a custom single-product.php page if this make a difference to my issue.
I have attached an image of what I am trying to achieve and what my current shop page looks like.
I have build my own Wordpress theme and activated Woocommerce. Almost everypage works fine. But my Store and Product pages are not in Container. Also I would like to chanche the positions of sertain items on the Product Page. Theme is build in Bootstrap so I would like to use Bootstrapp to fix my Product page. The biggest problem is that I cannot find the right file to edit... Somebody got the solution?
You can check the site here.
Thanks!!
To build a WooCommerce Compatible theme, you need to edit the WooCommerce templates.
All the WooCommerce templates are located at woocommerce/templates folder. If you are not familiar with WooCommerce templates structure, you can install WooCommerce Template Hints, and it will display the template file name to show you where the content comes from.
To customize the template, please follow the best practices so your modifications will not be missing when you update WooCommerce.
I am new to using woocommerce and only been working with wordpress about six months so may be an easy answer.
I don't want any columns in my archive at all. I just want to display the products using a responsive grid system like this ...
http://www.responsivegridsystem.com/
or use masonry (preferred).
I have used masonry in a page template in wordpress to display an unordered list before without a problem but cannot figure out how to use it or the responsive grid with woocommerce shop.
How can I stop woocommerce using columns ?
Thanks
Overriding can be done in various ways, here's the cleanest approach:
The file is located at wp-content/plugins/woocommerce/templates/archive-product.php. You should put it in your theme folder - wp-content/themes/woocommerce/archive-product.php. Then make the changes you want. For instance, I'd start with removing the line do_action( 'woocommerce_sidebar' ). You might also want to override wrapper-start.php and wrapper-end.php found in the templates folder ( in either shop or global subfolder, depending on woocommerce version ), which can be overriden exactly the same way.
For reference, see their documentation: http://docs.woothemes.com/document/template-structure/
MSTAnnu put me on the right lines, I needed to be using content-product.php, and added a class to the tag in there. This overrides all column issues.
I changed the tag in the loop-start.php file in templates/global and used css to style into a responsive design using %. Not used to masonry layout yet but if I do will add solution here unless someone beats me to it.
I just setup WooCommerce on my wordpress site:
http://artendijen.com/product/test-product/
I am not a fan of the template where it has the description and additional information below and in tabs, I would like the have the description and additional information to the right of the product image. Is there a setting I missed or will I have to edit it via CSS myself?
There is no setting for layout in WooCommerce. If you can do what you need to do with CSS then thats great. Otherwise, you will need to use hooks and actions in your functions.php to move things around. You can also overwrite woocommerce template files by copying them to your template with the same structure and file names you find in the WooCommerce plugin.
http://docs.woothemes.com/document/introduction-to-hooks-actions-and-filters/