customization - Woocommerce Product page edit

admin管理员组

文章数量:1389858

I am making an online store with every category using a specific page template; that's all done, but now, I want to edit the layout of that page template.

As such, every product will have:

• a name,
• an image,
• a short description;
  I would like the product description to be between the product name and product price tag,
• a price tag, and
• a Add to Cart button.

My challenge: I have no idea about how to get started and need assistance in that regard.

What file do I possibly have to clone and or edit?

I am making an online store with every category using a specific page template; that's all done, but now, I want to edit the layout of that page template.

As such, every product will have:

• a name,
• an image,
• a short description;
  I would like the product description to be between the product name and product price tag,
• a price tag, and
• a Add to Cart button.

My challenge: I have no idea about how to get started and need assistance in that regard.

What file do I possibly have to clone and or edit?

• customization
• woocommerce-offtopic
• page-template

Share Improve this question edited Dec 25, 2016 at 16:41 nyedidikeke 49211 gold badge66 silver badges1515 bronze badges asked Mar 29, 2016 at 13:12 TLRTLR 3511 silver badge88 bronze badges 0

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 5

WooCommerce allows you to override its default templates. All templates are located in a woocommerce/templates folder. All you have to do is to create a woocommerce folder within your theme’s directory, and in this folder duplicate the files you’d like to override.

If you want to update the markup then you will need to copy archive-product.php and content-product.php files. If you just want to show a little description between the product name and price, then you can simply put following code into your theme's functions.php file.

function show_product_summary(){
    $product_summary = get_the_excerpt();
    echo '<div class="product-summary">'. substr( $product_summary , 0, 30 )  .'</div>';
}
add_action('woocommerce_shop_loop_item_title', 'show_product_summary', 10, 2);

You will see the product summary like below on product listing page.

Here is official blog post which will give you quick walkthrough.

本文标签： customizationWoocommerce Product page edit