Product Order on Shop page

Hi @marketinggreenpaint

I checked your site, but I can’t find where this is happening exactly. I tried it in various browsers, but it looks like this for me:
https://cld.wthms.co/pGKI1A

Can you tell me a bit more where you see it showing incorrectly? Is it in a specific browser, or a specific screen size, etc.?

@senff Ty for trying to help!

So, what you did was you went to the menu and selected Dehydrated.That page works fine.

Where the problem is happening is on the Products page. Where all products are shown.
Hope this helps

View post on imgur.com

• This reply was modified 5 years, 4 months ago by Daniel.

I see what you mean now. It looks like there is some invalid HTML code on that page (H3 titles are inserted inside an unordered list), which is causing the issue.

Can you tell me a little bit more how this specific page was created? For example, is it using a custom template, how are the products being added, etc.

@senff I am not the original person that developed this website.
I know it is using storefront theme with a child theme.
I can send you any files if needed, just don’t know how.

@senff Do you think this is doable?

If you paste the code of the page template here in this forum, someone might be able to help you with it.

I believe this is the page that I want to change. Hope I am not wrong.
Sorry about the long code, if there is any better way I could do this please tell me ??

<?php
/**
 * The template for displaying full width pages.
 *
 * Template Name: All Products
 *
 * @package storefront
 */

$url = get_template_directory_uri().'/assets/css/all-products.css'; wp_enqueue_style( 'style', $url );

get_header(); ?>

<?php
    $args = array(
         'taxonomy'     => 'product_cat',
         'parent' => 0,
         'hide_empty' => 0,
         'tax_query'             => array(
    	    array(
            'taxonomy'  => 'product_cat',
            'field'     => 'tag_ID',
            'terms'     => array( 99 ),
            'operator'  => 'NOT IN'
          )
          )
    );
    $subcats = get_categories($args);
    echo '<ul class="categories-link-wrapper">';
      echo '<li class="categories-link selected" data-value="all"><a href="">All</a></li>';
      foreach ($subcats as $sc) {
        if ($sc->cat_name != 'NAF') {
            $link = get_term_link( $sc->slug, $sc->taxonomy );
            echo '<li class="categories-link" data-value="'.$sc->slug.'"><a href="'. $link .'">'.$sc->name.'</a></li>';
        }
      }
    echo '</ul>';
?>

<div class="section all-products" style="min-height: 200px;">
    <ul class="products">
        <?php
        foreach ($subcats as $sc) {
            if ($sc->cat_name != 'NAF') {
                echo '<h3 class="section-title">'.$sc->name.'</h3>';
                $args = array( 
                    'post_type' => 'product',
                    'posts_per_page' => 100,
                    'orderby' => 'date',
                    'tax_query' => array(
        			    array(
                        'taxonomy'  => 'product_cat',
                        'field'     => 'slug',
                        'terms'     => array( $sc->name ),
                        )
                    ) 
                );

                $loop = new WP_Query( $args );
        
                while ( $loop->have_posts() ) : $loop->the_post(); 
                    global $product; 
        
                    wc_get_template_part( 'content', 'product' );
        
                endwhile; 
        
        
                wp_reset_query();
            }
        }
        ?>
    </ul>
</div>

<script>

jQuery(document).ready(function() {
  jQuery(".categories-link-wrapper").on("click","li.categories-link", function(event) { 
     event.preventDefault();
     jQuery(".categories-link.selected").removeClass("selected");
     jQuery(this).addClass("selected");
     jQuery.ajax({
         type: "POST",
         url: "<?php bloginfo('template_directory') ?>/assets/backfiles/all-products-process.php",
         data: {'postdata': jQuery(this).attr('data-value')},
         beforeSend: function() {
            jQuery('.products').html( "<div><img src='<?php bloginfo('template_directory') ?>/assets/images/tff_homepage/loading.gif' style='display:block;margin:auto;'></div>" );
         },
         success: function(result){
           jQuery('.products').html( result );
         }
     });
     return false;
  });
});
</script>

<?php get_footer(); ?>

Can you try replacing this line:

echo '<h3 class="section-title">'.$sc->name.'</h3>';

To this:

echo '</ul><h3 class="section-title">'.$sc->name.'</h3><ul class="products">';

@senff I did it. It’s still on the live site. I believe it is not doing anything?

Not sure if it helps or not, but this is the CSS for the “All Products” page template.

.section {
    margin-bottom: 80px;
}
.section-title {
    color: #3F2803;
    margin-bottom: 60px;
    font-family: "Raleway";
    font-weight: 700;
    font-size: 34px;
}
.categories-link-wrapper {
    text-align: center;
    margin-bottom: 45px;
}
.categories-link-wrapper .categories-link {
    display: inline-block;
    margin-right: 8px;
    padding: 10px 20px;
    background: #f2f5f8;
    border-radius: 10px;
    font-family: "Raleway";
    font-weight: 400;
    font-size: 13px;
}
.categories-link-wrapper .categories-link:last-child {
    margin-right: 0;
}
.categories-link-wrapper .categories-link.selected {
    background: #80B500;
}
.categories-link-wrapper .categories-link a {
    color: #8C8C8C;
    cursor: pointer;
}
.categories-link-wrapper .categories-link.selected a {
    color: #FFF;
}
.all-products .products li {
    width: 29.4117647059% !important;
    float: left;
    margin-right: 5.8823529412%;
}
@media only screen and (max-width: 767px) {
    .categories-link-wrapper .categories-link { margin-bottom: 10px; }
    .all-products .products li { 
        width: 47.06% !important;
        margin-bottom: 35px !important;
    }
    .all-products .products li:nth-child(2n) { 
        margin-right: 0;
    }
}

It’s a little trickier it seems, and things are not fully working like they’re supposed to be. Here’s what I see that happens:

1. Go to https://www.thefuturefoods.com/products/
2. Select any of the subcategories (Cereals, Dehydrated, etc.)
3. Click on ALL

You will then see that all categories are being loaded twice (or, to be more precise, within each category, ALL products will be loaded). That shows there is some problem in the Javascript code that loads the product, that can not be fixed by simply making changes in the template and/or CSS.

I’d suggest to remove the code change I provided earlier, and find a web developer who can focus on this in a bit more detail to see how it was coded originally (and how to fix the issues you’re having).

• This reply was modified 5 years, 4 months ago by Senff - a11n.
• This reply was modified 5 years, 4 months ago by Senff - a11n.

@senff I deleted the code and it is working as originally

Great. You’ll still need to work on the original problem though. The issue is that there are <H3> tags in your product list, without them being wrapped in

• tags:

  https://cld.wthms.co/Tjvbia

  I’d check with a developer to see if they can ensure that this is avoided (it’s invalid HTML code which is also the main reason why the products don’t line up properly), without having an impact on the way products are loaded after you select one of the categories listed at the top.

@senff Not sure I understood. The issue is the H3 tags, but is removing them a solution?

The issue is the H3 tags, but is removing them a solution?

I do believe that the H3 tags are causing some formatting issues on your page (since they are not wrapped in LI tags) but removing them from the template is probably not enough. The script that is launched to populate the page with products (when you select the “ALL” button) will probably put them back.

It’s best to find a developer who can look into the underlying code of your site in more detail.