How/where do i edit product box structure?

  • Resolved randomwpuser

    (@randomwpuser)


    3 years, 5 months ago

    I am working on my custom woo theme, and i want to change the structure of the product box in the product loop. I found that the “

      ” and “

    ” are in loop -start and -end files, but how do I change the inside html?

    I could fint indivitual components like price, title, etc, but I want to move the add to cart button inside the “.woocommerce-LoopProduct-link”,
    now i have this structure:

    <ul class="products columns-4">
<li class="product">
<a class="woocommerce-LoopProduct-link">...</a>
<a class="add_to_cart_button">...</a>
</li>
</ul>

    I tried to search the documentation and couldn’t find anything useful.

Viewing 6 replies - 1 through 6 (of 6 total)

  • Basically there are 2 ways to customize the output:

    1. By using actions and filters WooDocs
    2. By doing a template override Docs on template override

    Method #1 is the preferred method, but if you are not proficient with WordPress/WooCommerce, it can be a bit difficult.

    Method #2 will work but it can break with some future updates of WooCommerce especially if you’re doing heavy customizations.

    Thread Starter randomwpuser

    (@randomwpuser)

    I get that, but what is confusing me is that nowhere I could find that specific structure. Basically the list items, so I could simply flip the order.

    Take a look at the wp-content/plugins/woocommerce/templates/content-product.php file that file is controlling the structure of the product card.

    To override that file in your theme copy it to:

    wp-content/themes/your-theme/woocommerce/content-product.php

    Thread Starter randomwpuser

    (@randomwpuser)

    ah yeah thanks, i got it by editing the wc-template-hooks actually:
    add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_add_to_cart', 10 );

    But i had the trouble that add to cart button was still thrown out of the item since both are links. Is there a way to overwrite that behaviour? For now i change add to cart to a span.

    Well, it’s a html thing you can’t nest <a> into an <a> element, if Add to cart button should link to the product page you should change the label to View Product or so.

    If it adds the product directly to cart you should extract it from the wrapping <a> element.

    I’d suggest to wrap the image and product name in 2 separate <a> elements so they are clickable and linking to the product page, and the Add to cart can be below that.

    Mirko P.

    (@rainfallnixfig)

    Hi @randomwpuser,

    We’ve not seen any activity on this thread for a while, so I’m marking this thread as resolved.

    If you have further questions, please feel free to open a new topic.

    Thanks.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How/where do i edit product box structure?’ is closed to new replies.