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 .
Related
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.
I am trying to edit the Product and checkout Page on Woocommerce. WE have a Divi theme installed, but it doesn’t allow me to customize the product page. Does anyone know where I can find the files that generate the product page so I can edit them? For example, I want to remove the product image, and make it a 2 column layout instead of 1. I know PHP/HTML/JS/CSS so I can edit it once I find out where to edit.
Divi has the Theme Builder which can definitely let you custom design a Product page: https://www.elegantthemes.com/blog/theme-releases/divi-4
Here are some examples:
https://www.elegantthemes.com/examples/product/divi-theme-builder-6/
https://www.elegantthemes.com/examples/product/divi-theme-builder-5/
https://www.elegantthemes.com/examples/product/divi-theme-builder-4/
https://www.elegantthemes.com/examples/product/divi-theme-builder-3/
https://www.elegantthemes.com/examples/product/divi-theme-builder-2/
https://www.elegantthemes.com/examples/product/divi-theme-builder-1/
In order to override the woocommerce templates you look for:
If there is not exist a woocomerce folder in your theme root folder then, add one and name it woocommerce like YourTheme->woocommerce
Then in your woocommerce folder add a folder and name it checkout
Go into your wp-content->plugins->woocommerce->templates->checkout and copy the
files that you want to override in you theme->woocommerce->checkout
folder
In wp-content->plugins->woocommerce->templates you will also find the
content-product.php & content-single-product.php. Copy both and add them to your theme->woocommerce folder.
You can then start editing the files you want to change
First, you need to create the Child Theme.
Then, go to the WooCommerce folder of the Child Theme, here is the template hierarchy for the checkout page: https://woocommerce.com/document/template-structure/
www.YourWebsiteURL.com/woocommerce.5.9.0/woocommerce/templates/checkout/ Here you can access the checkout templates.
Let me know if that helps!
I have a woocommerce website, which the current single product page was seems been accidentally adjusted, the layout became bit weird. May I know how can I adjust back to the normal display? Currently, the display will be photo on top, and description at the bottom of the photo instead next to the photo, can anyone advise?
Can I directly overwrite the file from a fresh copy of woocommerce plugin folder to the live folder?
Yes, you can update the woocommerce plugins or replace the plugin with the new one. But If you want to manually change the design of the single product page then you can copy the template folder of woocommerce plugins to your theme directory and edit the single-product.php file.
I have my own html to display all products inserted in WooCommerce. But I am unable to show it in my styling. I have searched it but unable to find any good solution.
Please help.
You have to learn about wordpress templates hierarchy that all files how it works?
https://developer.wordpress.org/themes/basics/template-hierarchy/
Suppose You want to create single page of product then create a new file into your theme with name single-product.php then single product url automatically render this file.
As same you want to create shop page (Where all products should shown) then create a file into your theme with name archive-product.php then shop page automatically render this File
For add to Cart functionality there are lots of plugin that can be used.
I'm trying to edit the checkout page, but can't find the template. What's the location inside plugin, of the file that has checkout fields?
There are several php files that make up the checkout page.
wp-content/plugins/woocommerce/templates/checkout/
cart-errors.php
form-billing.php
form-checkout.php
form-coupon.php
form-login.php
form-pay.php
form-shipping.php
review-order.php
thankyou.php
wp-content/plugins/woocommerce/templates/checkout/form-checkout.php is the main file.
[Template Structure from Woo Commerce Docs][1]
http://wcdocs.woothemes.com/codex/template-structure/
https://docs.woothemes.com/document/template-structure/
It's recommended that you copy the template folder It's recommended to copy over the template folder with the files you wish to change from the woocommerce plugin directory. Put it at the root of your theme and rename it to woocommerce (leaving the template folder intact in the plugin directory to allow for upgrading).
Be careful of your cart template which is by default the page.php template from your general theme.
You can change the cart layout by changing the page.php, or go to your WordPress cart page, edit and change the template for an other one.
Hope it helps, I just wasted 2h searching that.
There are a set of several templates that control the checkout page. They can be found in the WooCommerce plugin folder in templates/checkout.
You can put a woocommerce/templates/checkout folder inside your theme's folder and copy the templates you want to alter into it. Those will override the normal templates without altering the plugin itself. That way your changes won't get overwritten when WooCommerce is updated.
Note: I don't suggest to direct edit on plugin file because if by mistake you updated than you will lost all changes. so first copy /woocommerce/templates/ directory to your theme directory inside /theme/woocommerce/ and
Then you should edit files in theme/woocommerce/checkout/
Refer more: https://docs.woocommerce.com/document/template-structure/