Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Woocommerce: Replace li tag for a div tag in the product loop

So I am creating my first Woocommerce theme and I’m wondering why all products are listed as a <li>. Is there a way to replace these <li> items for <div> items?

I’ve tried to replace it with the usage of action hooks, yet I can’t find any action hook that assigns the <li>. I saw the <li> is in the "content-product" file and that it actually isn’t assigned to any action at all..

I’m loading the Woocommerce products on my homepage in a custom loop:

<section class="products-front container-full">

  <div class="products-front-inner container">
    <?php

        $args = array(
            'post_type' => 'product',
            'posts_per_page' => 6
            );
        $loop = new WP_Query( $args );

        if ( $loop->have_posts() ) {
            while ( $loop->have_posts() ) : $loop->the_post();

                wc_get_template_part( 'content', 'product' );

            endwhile;
        } else {
            echo __( 'No products found' );
        }

        wp_reset_postdata();

    ?>
   </div>
</section>

With that it’s loading the content-product.php file. My question is: can I replace the <li> for a <div>? Or isn’t that really necessary? Is it fine just to leave it as a <li>?

Tags:

2

Answers


  1. 0

    Yes, you can always change <li> to <div>. However, to change the <li> to <div> you will have to change on the loop-start.php and loop-end.php file otherwise <div> will be in <ul> is also in this file which is not a good practice.

    So, you should not change it unless really necessary. It is always good to use Woocommerce default structure as many functionality works on the classes provided by Woocommerce.
    Also, you can override the Woocommerce template files from theme files as suggested here.

    Login or Signup to reply.
  2. 0

    The actual answer, for future searchers, is: The tag is stored in the loop-start.php and loop-end.php template files. The

  3. tags is stored in the content-product.php template files (main folder of woocommerce/templates).

    4. So editing both of these files (by adding them to your child theme first) is the way to do this properly.

Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search