customizer settings don’t work

I’ve been trying to figure out why product archives are displaying products in a “totem pole” fashion even though I have set the archive appearance to show 4 columns. While inspecting the code, I found that each list item has the word “first” after it and, when I eliminated that from the second product on the archive, then the archive puts the 2nd product in the row instead of stacking it under the first product.

Here is the HTML output from the page source:

<ul class="products columns-4">
<li class="first post-54 product type-product status-publish has-post-thumbnail product_cat-display-cases entry instock shipping-taxable purchasable product-type-simple">

<!--<li class="post-54 product type-product status-publish has-post-thumbnail product_cat-display-cases entry  instock shipping-taxable purchasable product-type-simple">-->
  <a href="https://localhost/championshipbasketballs/product/premium-mirror-base-basketball-display-case/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
  <a href="https://localhost/championshipbasketballs/product/premium-mirror-base-basketball-display-case/">

    <img width="200" height="200" src="//localhost/championshipbasketballs/wp-content/uploads/Premium-Mirror-Basketball-Display-Case-200x200.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail wp-post-image" alt="souvenier basket ball cases" srcset="//localhost/championshipbasketballs/wp-content/uploads/Premium-Mirror-Basketball-Display-Case-200x200.jpg 200w, //localhost/championshipbasketballs/wp-content/uploads/Premium-Mirror-Basketball-Display-Case-150x150.jpg 150w, //localhost/championshipbasketballs/wp-content/uploads/Premium-Mirror-Basketball-Display-Case-300x300.jpg 300w, //localhost/championshipbasketballs/wp-content/uploads/Premium-Mirror-Basketball-Display-Case-85x85.jpg 85w, //localhost/championshipbasketballs/wp-content/uploads/Premium-Mirror-Basketball-Display-Case-100x100.jpg 100w" sizes="(max-width: 200px) 100vw, 200px" /><h2 class="woocommerce-loop-product__title">Premium Mirror Base Basketball Display Case</h2>
  <span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>79.95</span></span>

  </a>

  </a><a href="/championshipbasketballs/product-category/display-cases/?add-to-cart=54" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="54" data-product_sku="" aria-label="Add &ldquo;Premium Mirror Base Basketball Display Case&rdquo; to your cart" rel="nofollow">Add to cart</a></li>
<li class="first post-56 product type-product status-publish has-post-thumbnail product_cat-display-cases entry  instock shipping-taxable purchasable product-type-simple">

<!--<li class="post-56 product type-product status-publish has-post-thumbnail product_cat-display-cases entry last instock shipping-taxable purchasable product-type-simple">-->
  <a href="https://localhost/championshipbasketballs/product/black-plastic-base-basketball-display-case/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
  <a href="https://localhost/championshipbasketballs/product/black-plastic-base-basketball-display-case/">

    <img width="200" height="200" src="//localhost/championshipbasketballs/wp-content/uploads/Black-Plastic-Basketball-Display-Case-200x200.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail wp-post-image" alt="souvenier basket ball case" srcset="//localhost/championshipbasketballs/wp-content/uploads/Black-Plastic-Basketball-Display-Case-200x200.jpg 200w, //localhost/championshipbasketballs/wp-content/uploads/Black-Plastic-Basketball-Display-Case-150x150.jpg 150w, //localhost/championshipbasketballs/wp-content/uploads/Black-Plastic-Basketball-Display-Case-300x300.jpg 300w, //localhost/championshipbasketballs/wp-content/uploads/Black-Plastic-Basketball-Display-Case-85x85.jpg 85w, //localhost/championshipbasketballs/wp-content/uploads/Black-Plastic-Basketball-Display-Case-100x100.jpg 100w" sizes="(max-width: 200px) 100vw, 200px" /><h2 class="woocommerce-loop-product__title">Black Plastic Base Basketball Display Case</h2>
  <span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>49.95</span></span>

  </a>

  </a><a href="/championshipbasketballs/product-category/display-cases/?add-to-cart=56" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="56" data-product_sku="" aria-label="Add &ldquo;Black Plastic Base Basketball Display Case&rdquo; to your cart" rel="nofollow">Add to cart</a></li>
</ul>

I’ve been ferreting through all the WooCommerce plugin templates to find out where this HTML might be coming from. It is not coming from my theme’s code anywhere.

All that the WooCommmerce loop does is describe the number of columns and embed that in the HTML but the archive-product.php doesn’t appear to do anything with that value.

Can someone who knows something tell me how to solve this problem? It may have been introduced with recent WooCommerce updates because when we used to have more granular access to display settings this wasn’t happening.

• This topic was modified 6 years, 8 months ago by Marj Wyatt.