I
I
Islam Ibakaev2018-02-19 07:26:29
WordPress
Islam Ibakaev, 2018-02-19 07:26:29

How to change the structure and list of product classes in the product loop in woocommerce?

1. For example, how is it ...

<li class="post-67 product type-product status-publish has-post-thumbnail product_cat-posters last instock shipping-taxable purchasable product-type-simple">
  <a href="//localhost:3000/product/ship-your-idea-3/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
    <img width="300" height="300" src="//localhost:3000/wp-content/uploads/2013/06/poster_1_up-300x300.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail wp-post-image" alt="" srcset="//localhost:3000/wp-content/uploads/2013/06/poster_1_up-300x300.jpg 300w, //coloshop.loc/wp-content/uploads/2013/06/poster_1_up-150x150.jpg 150w, //coloshop.loc/wp-content/uploads/2013/06/poster_1_up-768x768.jpg 768w, //coloshop.loc/wp-content/uploads/2013/06/poster_1_up-600x600.jpg 600w, //coloshop.loc/wp-content/uploads/2013/06/poster_1_up.jpg 1000w" sizes="(max-width: 300px) 100vw, 300px">
    <h2 class="woocommerce-loop-product__title">Ship Your Idea</h2>
    <span class="price">
      <span class="woocommerce-Price-amount amount">
        <span class="woocommerce-Price-currencySymbol">£</span>15.00</span>
    </span>
  </a>
  <a href="/?add-to-cart=67" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="67" data-product_sku="" aria-label="Add “Ship Your Idea” to your cart" rel="nofollow">Add to cart</a>
</li>

exchange for this ...
(women) or (discount) means. that the class may or may not be present.
<div class="product-item (women)">
  <div class="product (discount) product_filter" style="border-right: 1px solid rgb(233, 233, 233);">
    <div class="product_image">
      <img src="product_9.png" alt="product">
    </div>
    <div class="product_bubble product_bubble_right product_bubble_red d-flex flex-column align-items-center"><span>sale</span></div>
    <div class="favorite favorite_left"></div>
    <div class="product_info">
      <h6 class="product_name"><a href="single.html">DYMO LabelWriter 450 Turbo Thermal Label Printer</a></h6>
      <div class="product_price">$410.00</div>
    </div>
  </div>
  <div class="red_button add_to_cart_button"><a href="#">add to cart</a></div>
</div>

2. Is it possible to get rid of this list of classes
post-67 product type-product status-publish has-post-thumbnail product_cat-posters last instock shipping-taxable purchasable product-type-simple
Or do they have to be present? If it is possible, but not from all, then from which it is impossible and why?
3. As I already mentioned, products can have the classes women or discount or both (see the example above). How to add these classes dynamically.
Thanks for the help!

Answer the question

In order to leave comments, you need to log in

1 answer(s)
I
ItsCoder, 2018-02-19
@ItsCoder

There is a templates folder in the WooCommerce plugin folder, copy the files to your theme and edit as you like.
product-loop is in content-product.php file

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question