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

1 Answer 1

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.