WP: Adding a div to WooCommerce single products - wordpress

I'm attempting to add a div section to a every single product on WooComerce. I've created a child theme of the Storefront theme. From here I'm completely lost however, WooCommerce seems a little counter intuitive.
I'm attempting to add the new div section under the product description section. It can't be a particularity task, I've been stuck on this for hours though fumbling through the template files.

Here is the documentation on how to override core WooCommerce template :
https://docs.woothemes.com/document/template-structure/
If you take a look at the files for the 2.4.7 version of WooCommerce :
https://github.com/woothemes/woocommerce/tree/2.4.7/templates
There is a file description in tabs directory: single-product/tabs/description.php
Take a look at all file under single-product folder and you will understand how the single product page is built.

Related

Woocommerce Single Product Page: Restore Default Layout/Design

In many of the tutorials I've read/watched about customizing the single product page, there is an image of the default, standard woocommerce single product page, which looks great without any customization. For some reason, my single product page doesn't look half as good.
https://kingatlaw.attorney/product/civil-litigation/
Does anyone know the reason my single product page doesn't look like the images I'm seeing of the default layout or how to restore the default? In the alternate, is there a place where I can find css/php code I can copy/paste into functions and styles to use their template, rather than wrestling with custom code?
As I am checking with ctrl+shif+i, no error found.
So you should fallow few setps:
Backup your single-product.php
create woocommerce folder inside your active theme folder
eg. theme folder -> woocommerce
Copy woocommerce plugin template page and paste in the theme folder -> woocommerce
eg. copy plugins -> woocommerce -> templates -> single-product.php
and past theme folder -> woocommerce -> single-product.php
Then refresh the page and check it's working or not. if working then you can customize the page.

override woocommerce.php with custom content for only store homepage

I currently use FoundationPress (Foundation6) as framework and starter theme. It uses woocommerce.php template files to hook into woocommerce functionality but for the life of me I can't figure something out.
I need to add custom content to the stores homepage only, non of the other store pages. Whatever I add to woocommerce.php will appear on all store pages, but I can't figure out what template controls the stores homepage.
The first set of templates I can see are used are the ones that are inthe loop folder and content-product.php. Normally I would just edit archive-product.php but woocommerce.php takes over from this template: see bottom of https://docs.woocommerce.com/document/template-structure/.
The shop is archive-product. However I did not try FundationPress but it seems that WooCommerce needs in the last version to declare WooCommerce support in themes. https://github.com/woocommerce/woocommerce/wiki/Declaring-WooCommerce-support-in-themes
So first try https://en-gb.wordpress.org/plugins/query-monitor/ and check which template is loading. And if its loading page.php instead of Woocommerce template implement the line in functions.php.

Woocommerce does not show a sidebar on my shop page?

Even with a woosidebars plugin, my sidebar doesn't show on the shop page. I think it may be due to the free plan theme limitations, however on the pro theme description it doesn't mention an added feature. Could anybody help? Thank you!
You must check your shop page template, usually it is placed in the folder /woocommerce of the theme. Sidebar must been there, find it by id.
Also you can to rewrite Woocommerce templates and add the sidebars here: just create the new directory named Woocommerce in your theme and add your customized templates here. In this case, you need to name the template files exactly as they are called in the plugin, you can see it here

Edit Product Template on Shop template of Woocommerce

I have a wordpress website with woocommerce deployed. I want to override some of the layout and the way each product is displayed on the shop page. I am doing this by creating a child template. I am able to override some functions, but am unable to find which file I need to edit, in order to modify how the thumbnails are displayed. In other words, the thumbnails shown in the following file...
woocommerce\templates\content-product.php
You can just copy templates\content-product.php files to your theme folder; it will override the default template and do whatever changes you need. Visit WooCommerce official documentation for further details.

customise single product page layout in woocommerce

I want to have the layout like this in the single product page in woocommerce;
on the left side:
Product Title
Image
in stock
Add to cart
on the right side:
description
can you please help me with this as im pulling my hair out!!
thanks
You need to play with page layout . It will easy if you have some knowledge of HTML , CSS and php .
You need to create a folder named woocommerce inside your themes folder and copy the contents of the templates folder of the woocommere plugin inside your themes folder. In this way you are able to overwrite the default content.
After completing the above, look for a file content-single-product in the woocommerce folder in your themes's folder. You'll see lots of hooks and do_actions. Don't panic. These are just calling the files from the single-product folder inside the woocommerce folder. In that folder the files are nicely titled and grouped and you'll know what one file is responsible just by seeing the file title. For example price.php for displaying the price, product-attributes.php for product attributes (in case the product is variable).
Play around with these files. If you need the original ones you'll find them again in the woocommerce plugin's folder .
Its a safe and better way to customize your product page or woo commerce .
Recommendation - Never play with woo commerce files inside plugin folder . Copy plugin files in your theme directory before editing and do edit there ..
I am sorry if you did not get your answer .

Resources