[axelra82Participant]

Hey,

I’m having some trouble navigating the woocommerce template structure. I’m using integrity child theme and latest Woocommerce. I want to add a custom “quick view” button under each product (li elements) but I can’t find where these are defined.

[LelyModerator]

Hi There,

Thanks for posting in. Please check this link:https://docs.woothemes.com/document/template-structure/. To help you better, please give us more details. On which page do you want to add this button? Is it the shop page, archive page or single product page? Where do you want this to add? After which element? Providing answer to this question give us more understanding on what you want to achieve.

[axelra82Participant]

Thank you for the link. I have a basic understanding of the template structure. I’m trying to add a “quick view” button (that opens a side panel with the product loaded inside with JQuery) in all loop instances. So be it the shop page, an archive, or a module showing sale or featured I need that button in the view.
I also want to remove the “Archive of…” title for the “archive” (category) pages.

[RadModerator]

Hi there,

The code is located here,

\wp-content\themes\x\framework\functions\global\plugins\woocommerce.php

function x_woocommerce_shop_product_thumbnails() {

  GLOBAL $product;

  $id     = get_the_ID();
  $thumb  = 'entry';
  $rating = $product->get_rating_html();

  woocommerce_show_product_sale_flash();
  echo '<div class="entry-featured">';
    echo '<a href="' . get_the_permalink() . '">';
      echo get_the_post_thumbnail( $id, $thumb );
      if ( ! empty( $rating ) ) {
        echo '<div class="star-rating-container aggregate">' . $rating . '</div>';
      }
    echo '</a>';
  echo "</div>";

}

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
add_action( 'woocommerce_before_shop_loop_item_title', 'x_woocommerce_shop_product_thumbnails', 10 );

That is a function file, hence, overriding the template will not going to work. What you could do is copy the code is define it on your child theme’s functions.php

Example,

function x_woocommerce_shop_product_thumbnails_my_version() {

  GLOBAL $product;

  $id     = get_the_ID();
  $thumb  = 'entry';
  $rating = $product->get_rating_html();

  woocommerce_show_product_sale_flash();
  echo '<div class="entry-featured">';
    echo '<a href="' . get_the_permalink() . '">';
      echo get_the_post_thumbnail( $id, $thumb );
      if ( ! empty( $rating ) ) {
        echo '<div class="star-rating-container aggregate">' . $rating . '</div>';
      }
    echo '</a>';
    echo '<span>QUICK VIEW</span>';
  echo "</div>";

}

add_action( 'init', 'my_own_product_loop_items', 9999 );

function my_own_product_loop_items () {

remove_action( 'woocommerce_before_shop_loop_item_title', 'x_woocommerce_shop_product_thumbnails', 10 );
add_action( 'woocommerce_before_shop_loop_item_title', 'x_woocommerce_shop_product_thumbnails_my_version', 10 );

}

Hope this helps.

[axelra82Participant]

Thank you for the answer. However, I’m looking to add the quick view button bellow the price (i.e. after everything). I’m also trying to move the “SALE” badge (it’s not integrating well with our design as a bulgy badge on top). I’d like to put the “SALE” before the price.

Is there some documentation for all of this? Somewhere we can search for the changes made by Themeco to the Woocommerce templating?

[LelyModerator]

Hello There,

You can find all woocommerce customization on these folder:wp-content\themes\x\woocommerce. Feel free to check the code.

To add content after the price, drill into the Woocommerce plugin folder to:\woocommerce\templates\single-product\price.php. Copy that file into \wp-content\themes\x-child\woocommerce\single-product. open the copied file and then add the quick view button after this line of code:

<p class="price"><?php echo $product->get_price_html(); ?></p>
Feel free to edit the page to add the sale badge too.

Hope this helps.

[Author]

Posts