Skip to content

Instantly share code, notes, and snippets.

@EmranAhmed
Last active September 1, 2021 12:15
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save EmranAhmed/68ca18450610ca7a4af9b59c6ec0fe75 to your computer and use it in GitHub Desktop.
Save EmranAhmed/68ca18450610ca7a4af9b59c6ec0fe75 to your computer and use it in GitHub Desktop.
  • Copy /wp-content/themes/bridge/woocommerce/content-product.php file to your child theme.
  • Add <?php do_action('wvs_pro_variation_show_archive_variation'); ?> end of the file before </li> tag.
  • content-product.php file for example
<?php
	/**
	 * The template for displaying product content within loops
	 *
	 * This template can be overridden by copying it to yourtheme/woocommerce/content-product.php.
	 *
	 * HOWEVER, on occasion WooCommerce will need to update template files and you
	 * (the theme developer) will need to copy the new files to your theme to
	 * maintain compatibility. We try to do this as little as possible, but it does
	 * happen. When this occurs the version of the template file will be bumped and
	 * the readme will list any important changes.
	 *
	 * @see     https://docs.woocommerce.com/document/template-structure/
	 * @package WooCommerce/Templates
	 * @version 3.4.0
	 */
	
	defined( 'ABSPATH' ) || exit;
	
	global $product, $qode_options_proya;
	
	// Ensure visibility
	if ( empty( $product ) || ! $product->is_visible() ) {
		return;
	}
?>

<?php if ( version_compare( WOOCOMMERCE_VERSION, '3.4' ) >= 0 ) { ?>
<li <?php wc_product_class(); ?>>
	<?php }
		else { ?>
<li <?php post_class(); ?>>
	<?php } ?>
	<?php do_action( 'woocommerce_before_shop_loop_item' ); ?>

    <div class="top-product-section">
        <a itemprop="url" href="<?php the_permalink(); ?>" class="product-category">
            <span class="image-wrapper">
            <?php
	            /**
	             * woocommerce_before_shop_loop_item_title hook
	             *
	             * @hooked woocommerce_show_product_loop_sale_flash - 10
	             * @hooked woocommerce_template_loop_product_thumbnail - 10
	             */
	            do_action( 'woocommerce_before_shop_loop_item_title' );
            ?>
            </span>
        </a>
		<?php do_action( 'qode_woocommerce_after_product_image' ); ?>
    </div>
	<?php if ( isset( $qode_options_proya[ 'woo_products_show_categories' ] ) && $qode_options_proya[ 'woo_products_show_categories' ] == 'yes' ) {
		
		// WooCommerce plugin changed hooks in 3.0 version and because of that we have this condition
		if ( version_compare( WOOCOMMERCE_VERSION, '3.0' ) >= 0 ) {
			echo wc_get_product_category_list( $product->get_id(), ', ', '<div class="product-categories">', '</div>' );
		} else {
			echo $product->get_categories( ', ', '<div class="product-categories">', '</div>' );
		}
	} ?>
    <a itemprop="url" href="<?php the_permalink(); ?>" class="product-category product-info">
        <h6 itemprop="name"><?php the_title(); ?></h6>
		<?php if ( isset( $qode_options_proya[ 'woo_products_show_title_sep' ] ) && $qode_options_proya[ 'woo_products_show_title_sep' ] == 'yes' ) { ?>
            <div class="separator after-title-spearator small center"></div>
		<?php } ?>
		<?php
			/**
			 * woocommerce_after_shop_loop_item_title hook
			 *
			 * @hooked woocommerce_template_loop_rating - 5
			 * @hooked woocommerce_template_loop_price - 10
			 */
			do_action( 'woocommerce_after_shop_loop_item_title' );
		?>
    </a>
	<?php do_action( 'wvs_pro_variation_show_archive_variation' ); ?>
</li>
  • On child theme functions.php
<?php
	if ( ! function_exists( 'wvs_fazzy_theme_support' ) ):
		function wvs_fazzy_theme_support() {

				remove_action( 'woocommerce_after_shop_loop_item', 'wvs_pro_archive_variation_template', 30 );
				remove_action( 'woocommerce_after_shop_loop_item', 'wvs_pro_archive_variation_template', 7 );
		}
	endif;
	
	add_action( 'init', 'wvs_fazzy_theme_support' );
  • Child theme override woocommerce/content-grid-product.php file and add
<?php global $product, $woocommerce_loop, $post; ?>
<div class="products-entry clearfix product-wapper">
<?php do_action( 'woocommerce_before_shop_loop_item' ); ?>
	<div class="products-thumb">
		<?php
			/**
			 * woocommerce_before_shop_loop_item_title hook
			 *
			 * @hooked woocommerce_show_product_loop_sale_flash - 10
			 * @hooked woocommerce_template_loop_product_thumbnail - 10
			 */
			do_action( 'woocommerce_before_shop_loop_item_title' );
			
		?>
		<div class='product-button'>
			<?php do_action('woocommerce_after_shop_loop_item'); ?>
		</div>
	</div>
	<div class="products-content">
		<h3 class="product-title"><a href="<?php esc_url(the_permalink()); ?>"><?php esc_html(the_title()); ?></a></h3>
		<?php do_action( 'woocommerce_after_shop_loop_item_title' ); ?>
	</div>
 
 <?php do_action('wvs_pro_variation_show_archive_variation'); ?> <!-- WVS HOOK -->
 
</div>
  • On child theme, woocommerce/content-product.php file add <?php do_action('wvs_pro_variation_show_archive_variation'); ?> after div.loop-add-to-cart element

  • Add

add_filter( 'woo_variation_swatches_archive_add_to_cart_button_selector', function () {
	return '.add_to_cart_button';
} );

on functioins.php file.

Add on child theme.

	function kalium_woocommerce_get_loop_product_image( $attachment_id, $classes = array() ) {

		// Image size
		$image_size = apply_filters( 'single_product_archive_thumbnail_size', 'woocommerce_thumbnail' );

		// Get Image
    // Add wp-post-image class for woo-variation-swatches
		$image = kalium_get_attachment_image( $attachment_id, $image_size, array('class'=>'wp-post-image') );

		// When there is no image
		if ( ! $image ) {
			return '';
		}

		ob_start();

		// Open link
		woocommerce_template_loop_product_link_open();

		// Show image
		echo $image;

		// Close link
		woocommerce_template_loop_product_link_close();

		$image_html = ob_get_clean();

		// Classes
		$classes = is_array( $classes ) || empty( $classes ) ? $classes : array( $classes );

		if ( $classes ) {
			$classes = kalium()->helpers->showClasses( $classes );
			$image_html = preg_replace( '/(woocommerce-LoopProduct-link.*?)\"/', '${1} ' . trim( $classes ) . '"', $image_html );
		}

		return $image_html;
	}
  • Child theme functions.php
<?php
	// GetWooPlugin Developer Override
	function gwp_dt_woocommerce_shop_overview_extra_div_close() {
		
		$out = "";
		global $product;
		if ( $product->is_type( 'bundle' ) ) {
			$product = new WC_Product_Bundle( $product->get_id() );
		}
		
		ob_start();
		woocommerce_template_loop_add_to_cart();
		$add_to_cart = ob_get_clean();
		
		$out .= '<div class="aligncenter">';
		ob_start();
		do_action( 'gwp_overwride_swatches_plugin_before_cart_button' );
		$out .= ob_get_clean();
		$out .= '</div>';
		
		$out .= '<div class="woocommerce_cart aligncenter">';
		
		if ( ! empty( $add_to_cart ) ) {
			$add_to_cart = str_replace( ' class="', ' class="small ', $add_to_cart );
		}
		
		$out .= $add_to_cart;
		
		$out .= '</div>';
		
		
		$out .= '<div class="aligncenter">';
		ob_start();
		do_action( 'gwp_overwride_swatches_plugin_after_cart_button' );
		$out .= ob_get_clean();
		$out .= '</div>';
		
		echo $out;
	}
	
	function gwp_oldhaven_woo_shop_overview_show_price() {
		
		$out = "";
		global $product;
		
		$out .= "<div class='product-thumb'>";
		
		$out                .= '<a class="image" href="' . get_permalink() . '" title="' . get_the_title() . '">';
		$id                 = $product->get_id();
		$image              = get_the_post_thumbnail( $id, 'shop_catalog' );
		$image              = ! empty( $image ) ? $image : "<img src='http://placehold.it/500' alt='product-thumb' />";
		$attachment_ids     = $product->get_gallery_image_ids();
		$secondary_image_id = ! empty( $attachment_ids ) ? $attachment_ids[ '0' ] : '';
		$image1             = wp_get_attachment_image( $secondary_image_id, 'full', '', $attr = array( 'class' => 'secondary-image attachment-shop-catalog' ) );
		// $out                .= $image . $image1;
		$out .= $image;
		$out .= '</a>';
		
		$out .= '<div class="product-buttons-wrapper">';
		
		$out .= '<div class="wc_inline_buttons">';
		
		ob_start();
		woocommerce_template_loop_add_to_cart();
		$add_to_cart = ob_get_clean();
		
		if ( shortcode_exists( 'yith_wcwl_add_to_wishlist' ) ) {
			$out .= '<div class="wcwl_btn_wrapper wc_btn_inline">' . do_shortcode( '[yith_wcwl_add_to_wishlist]' ) . '</div>';
		}
		
		$out .= '</div>';
		
		$out .= '</div>';
		
		$out .= '<a class="product-content" href="' . get_permalink() . '" title="' . get_the_title() . '"> </a>';
		
		$out .= "</div>";
		
		ob_start();
		woocommerce_template_loop_price();
		$price = ob_get_clean();
		
		$out .= "<div class='product-details'>";
		$out .= '<h5><a href="' . get_permalink( $product->get_id() ) . '">' . $product->get_name() . '</a></h5>';
		$out .= '<span class="product-price">' . $price . '</span>';
		$out .= '<div class="product-rating-wrapper">' . wc_get_rating_html( $product->get_average_rating() ) . '</div>';
		$out .= '</div>';
		echo( $out );
	}
	
	
	add_action( 'init', function () {
		
		if ( function_exists( 'wvs_pro_archive_variation_template' ) ):
			
			remove_action( 'woocommerce_after_shop_loop_item', 'dt_woocommerce_shop_overview_extra_div_close', 10 );
			remove_action( 'woocommerce_after_shop_loop_item', 'oldhaven_woo_shop_overview_extra_div_close', 10 );
			remove_action( 'woocommerce_after_shop_loop_item', 'oldhaven_woo_after_shop_loop', 10 );
			remove_action( 'woocommerce_after_shop_loop_item', 'oldhaven_woo_shop_overview_show_price', 10 );
			
			remove_action( 'woocommerce_after_shop_loop_item', 'wvs_pro_archive_variation_template', 30 );
			remove_action( 'woocommerce_after_shop_loop_item', 'wvs_pro_archive_variation_template', 7 );
			
			
			$position = ( 'after' === woo_variation_swatches()->get_option( 'archive_swatches_position' ) ? 'after' : 'before' );
			add_action( sprintf( 'gwp_overwride_swatches_plugin_%s_cart_button', $position ), 'wvs_pro_archive_variation_template' );
			
			add_action( 'woocommerce_after_shop_loop_item', 'gwp_oldhaven_woo_shop_overview_show_price', 12 );
			
			add_action( 'woocommerce_after_shop_loop_item', 'gwp_dt_woocommerce_shop_overview_extra_div_close', 14 );
			add_action( 'woocommerce_after_shop_loop_item', 'oldhaven_woo_shop_overview_extra_div_close', 16 );
			//add_action( 'woocommerce_after_shop_loop_item', 'oldhaven_woo_after_shop_loop', 18 );
   
		endif;
	} );

On functions.php

add_action( 'init', function () {
    remove_action( 'woocommerce_after_shop_loop_item', 'wvs_pro_archive_variation_template', 30 );
    remove_action( 'woocommerce_after_shop_loop_item', 'wvs_pro_archive_variation_template', 7 );
} );

On savoy-child theme /woocommerce/content-product.php

<?php
	/**
	 * The template for displaying product content within loops
	 *
	 * This template can be overridden by copying it to yourtheme/woocommerce/content-product.php.
	 *
	 * HOWEVER, on occasion WooCommerce will need to update template files and you
	 * (the theme developer) will need to copy the new files to your theme to
	 * maintain compatibility. We try to do this as little as possible, but it does
	 * happen. When this occurs the version of the template file will be bumped and
	 * the readme will list any important changes.
	 *
	 * @see     https://docs.woocommerce.com/document/template-structure/
	 * @package WooCommerce/Templates
	 * @version 3.4.0
	 * NM: Modified */
	
	defined( 'ABSPATH' ) || exit;
	
	global $product, $nm_theme_options, $nm_globals;
	
	// Ensure visibility
	if ( ! $product || ! $product->is_visible() ) {
		return;
	}
	
	nm_add_page_include( 'products' );
	
	// Action: woocommerce_before_shop_loop_item
	remove_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10 );
	// Action: woocommerce_shop_loop_item_title
	remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );
	// Action: woocommerce_after_shop_loop_item_title
	remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );
	// Action: woocommerce_after_shop_loop_item
	remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );
	
	// Hover product image
	$hover_image  = ( $nm_theme_options[ 'product_hover_image_global' ] ) ? TRUE : get_post_meta( $product->get_id(), 'nm_product_image_swap', TRUE );
	$post_classes = ( $hover_image ) ? 'hover-image-load' : '';
	
	// Product link
	$product_link_atts = ' href="' . esc_url( get_permalink() ) . '"';
	
	// Quickview link
	if ( $nm_theme_options[ 'product_quickview' ] ) {
		$quickview_enabled = TRUE;
		
		// Default link
		$show_default_link = apply_filters( 'nm_product_default_link', FALSE );
		if ( ! $show_default_link ) {
			// Action: woocommerce_after_shop_loop_item
			remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
		}
		
		$quickview_link_atts = $product_link_atts . ' data-product_id="' . esc_attr( $product->get_id() ) . '" class="nm-quickview-btn product_type_' . esc_attr( $product->get_type() ) . '"';
		
		// Override static product link?
		if ( $nm_theme_options[ 'product_quickview_links' ] == 'all' ) {
			$product_link_atts = $quickview_link_atts;
		}
	} else {
		$quickview_enabled = FALSE;
	}
?>
<li <?php wc_product_class( $post_classes ); ?>>
	
	<?php
		/**
		 * Hook: woocommerce_before_shop_loop_item.
		 */
		do_action( 'woocommerce_before_shop_loop_item' );
	?>

    <div class="nm-shop-loop-thumbnail nm-loader">
        <a<?php echo $product_link_atts; ?> class="woocommerce-LoopProduct-link">
			<?php
				/**
				 * Hook: woocommerce_before_shop_loop_item_title.
				 *
				 * @hooked woocommerce_show_product_loop_sale_flash - 10
				 * @hooked woocommerce_template_loop_product_thumbnail - 10
				 */
				do_action( 'woocommerce_before_shop_loop_item_title' );
				
				// Alternative/hover image
				if ( $hover_image ) {
					echo nm_product_thumbnail_alt( $product );
				}
			?>
        </a>
    </div>

    <div class="nm-shop-loop-details">
		<?php if ( $nm_globals[ 'wishlist_enabled' ] ) : ?>
            <div class="nm-shop-loop-wishlist-button"><?php nm_wishlist_button(); ?></div>
		<?php endif; ?>

        <h3><a<?php echo $product_link_atts; ?>><?php the_title(); ?></a></h3>
		<?php
			/**
			 * Hook: woocommerce_shop_loop_item_title.
			 */
			do_action( 'woocommerce_shop_loop_item_title' );
		?>

        <div class="nm-shop-loop-after-title <?php echo esc_attr( $nm_theme_options[ 'product_action_link' ] ); ?>">
            <div class="nm-shop-loop-price">
				<?php
					/**
					 * Hook: woocommerce_after_shop_loop_item_title.
					 *
					 * @hooked woocommerce_template_loop_price - 10
					 */
					do_action( 'woocommerce_after_shop_loop_item_title' );
				?>
            </div>

            <div class="nm-shop-loop-actions">
				<?php
					if ( $quickview_enabled ) {
						echo apply_filters( 'nm_product_quickview_link', '<a' . $quickview_link_atts . '>' . esc_html__( 'Show more', 'nm-framework' ) . '</a>' );
					}
					
					/**
					 * Hook: woocommerce_after_shop_loop_item.
					 *
					 * @hooked woocommerce_template_loop_add_to_cart - 10
					 */
					do_action( 'woocommerce_after_shop_loop_item' );
				?>
            </div>
        </div>
    </div>
	
	<?php do_action( 'wvs_pro_variation_show_archive_variation' ); ?>
</li>
  • Use it on child theme style.css file
.woocommerce #main .entry-summary .variations{
 display: block;
}

.ql_custom_variations{
 display: none;
}
  • On Child theme woocommerce/content-product.php and put this code:
<?php
/**
 * The template for displaying product content within loops
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/content-product.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woothemes.com/document/template-structure/
 * @author 		WooThemes
 * @package 	WooCommerce/Templates
 * @version 3.4.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}

global $product, $shopkeeper_theme_options, $animateCounter;

//woocommerce_shop_loop_item_title
remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 ); 

//woocommerce_before_shop_loop_item
remove_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10 );

//woocommerce_after_shop_loop_item_title
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );

add_action( 'woocommerce_after_shop_loop_item_title_loop_price', 'woocommerce_template_loop_price', 10 );
add_action( 'woocommerce_after_shop_loop_item_title_loop_rating', 'woocommerce_template_loop_rating', 5 );

//woocommerce_before_shop_loop_item_title
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 );
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );

// Ensure visibility
if ( empty( $product ) || ! $product->is_visible() ) {
	return;
}
?>


<li class="wvs-pro-product column <?php if ( $animateCounter ) echo ' delay-' . $animateCounter; ?><?php if ( (isset($shopkeeper_theme_options['catalog_mode'])) && ($shopkeeper_theme_options['catalog_mode'] == 1) ) echo ' display_buttons'; ?><?php if ( !$shopkeeper_theme_options['add_to_cart_display']) echo ' display_buttons'; ?>">
   
	<?php do_action( 'woocommerce_before_shop_loop_item' ); ?>	

		<?php
			$attachment_ids = $product->get_gallery_image_ids();
			if ( $attachment_ids ) {
				$loop = 0;
				foreach ( $attachment_ids as $attachment_id ) {
					$image_link = wp_get_attachment_url( $attachment_id );
					if (!$image_link) continue;
					$loop++;
					$product_thumbnail_second = wp_get_attachment_image_src($attachment_id, 'shop_catalog');
					if ($loop == 1) break;
				}
			}
		?>
		
		<?php do_action( 'woocommerce_before_shop_loop_item_title' ); ?>
		
		<?php

		$style = '';
		$class = '';        
		if (isset($product_thumbnail_second[0])) {            
			$style = 'background-image:url(' . $product_thumbnail_second[0] . ')';
			$class = 'with_second_image';     
		}
		
		if ( (isset($shopkeeper_theme_options['second_image_product_listing'])) && ($shopkeeper_theme_options['second_image_product_listing'] == "0" ) ) {
			$style = '';
			$class = '';
		}
		
		?>
		
		<div class="product_thumbnail_wrapper <?php if ( !$product->is_in_stock() ) : ?>outofstock<?php endif; ?>">
			
			<div class="product_thumbnail <?php echo $class; ?>">
				<a href="<?php the_permalink(); ?>">
					<span class="product_thumbnail_background" style="<?php echo $style; ?>"></span>
					<?php
						if ( has_post_thumbnail( $product->get_id() ) ) { 	
							echo get_the_post_thumbnail( $product->get_id(), 'shop_catalog');
						} else {
							echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="Placeholder" />', wc_placeholder_img_src() ), $product->get_id() );
						}
					?>
				</a>
			</div><!--.product_thumbnail-->
			
			<?php if ( (isset($shopkeeper_theme_options['catalog_mode'])) && ($shopkeeper_theme_options['catalog_mode'] == 0) ) : ?>
				<?php wc_get_template( 'loop/sale-flash.php' ); ?>
            <?php endif; ?>
			
			<?php if ( (isset($shopkeeper_theme_options['catalog_mode'])) && ($shopkeeper_theme_options['catalog_mode'] == 0) ) : ?>
				<?php if ( !$product->is_in_stock() && !empty($shopkeeper_theme_options['out_of_stock_label']) ) : ?>            
                    <div class="out_of_stock_badge_loop"><?php _e( $shopkeeper_theme_options['out_of_stock_label'], 'woocommerce' ); ?></div>            
                <?php endif; ?>
            <?php endif; ?>
			
			<?php if (class_exists('YITH_WCWL')) : ?>
			<?php echo do_shortcode('[yith_wcwl_add_to_wishlist]'); ?>
            <?php endif; ?>

            <?php do_action( 'woocommerce_after_shop_loop_item_title' ); ?>
			
		</div><!--.product_thumbnail_wrapper-->
				
		<h3><a class="product-title-link" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
		<?php do_action( 'woocommerce_shop_loop_item_title' ); ?>
		
        <?php if ( (isset($shopkeeper_theme_options['ratings_catalog_page'])) && ($shopkeeper_theme_options['ratings_catalog_page'] == "1" ) ) : ?>
        <div class="archive-product-rating">
			<?php do_action( 'woocommerce_after_shop_loop_item_title_loop_rating' ); ?>
		</div>
        <?php endif; ?>       
	
		<div class="product_after_shop_loop <?php echo ( GETBOWTIED_GERMAN_MARKET_IS_ACTIVE )  ? 'german-market-active' : ''; ?> <?php echo ( GETBOWTIED_WOOCOMMERCE_GERMANIZED_IS_ACTIVE )  ? 'germanized-active' : ''; ?>">
			
			<div class="product_after_shop_loop_switcher">
				
				<?php if( !GETBOWTIED_GERMAN_MARKET_IS_ACTIVE ) { ?>
					<div class='product_after_shop_loop_price'>
						<?php do_action( 'woocommerce_after_shop_loop_item_title_loop_price' ); ?>
					</div>
				<?php } ?>

				<?php if( GETBOWTIED_GERMAN_MARKET_IS_ACTIVE ) : ?>

					<div class="german-market-active">

						<?php add_action( 'woocommerce_german_market_info', array( 'WGM_Template', 'woocommerce_de_price_with_tax_hint_single' ), 7 ); ?>
						<?php add_filter( 'woocommerce_german_market_info', '__return_true' ); ?>

						<div class='product_german_market_info'>
						<?php do_action( 'woocommerce_german_market_info' ); ?>
						</div>

					</div>
					
				<?php endif ;?>

				<?php if ( (isset($shopkeeper_theme_options['catalog_mode'])) && ($shopkeeper_theme_options['catalog_mode'] == 0) ) : ?>
				
				<div class="product_after_shop_loop_buttons">

					<?php if( GETBOWTIED_WOOCOMMERCE_GERMANIZED_IS_ACTIVE ) : ?>
						<div class="germanized-active">
					    	<?php do_action( 'woocommerce_germanized_unit_price' ); ?>
				    	</div>
					<?php endif; ?>

					<?php do_action( 'woocommerce_after_shop_loop_item' ); ?>
				</div>

				<?php endif; ?>
				
			</div>
			
		</div>
    <?php do_action('wvs_pro_variation_show_archive_variation'); ?>
</li>

JS Update

	//=====================================================================
	//	Build dynamic add to cart message
	//=====================================================================
	var notificationContent = '';

	$('body').on('click', '.wvs_ajax_add_to_cart', function(){
		$('.woocommerce-message').remove();
		if ($('body').hasClass('woocommerce-wishlist'))
		{
			var imgSrc = $(this).parents('tr').find('img.attachment-shop_thumbnail').attr('src');
			var prodTitle = $(this).parents('tr').find('.product-name a').html();
		}
		else 
		{
			var imgSrc = $(this).parents('li').find('img.attachment-shop_catalog').attr('src');
			var prodTitle = $(this).parents('li').find('.product-title-link').html();
		}

		if ( typeof imgSrc != 'undefined' && typeof prodTitle != 'undefined' && $('body').hasClass('gbt_custom_notif') )
		{
			notificationContent = '<div class="woocommerce-message"><div class="product_notification_wrapper"><div class="product_notification_background" style="background-image:url(' + imgSrc + ')"></div><div class="product_notification_text">&quot;' + prodTitle + '&quot;' + addedToCartMessage +'</div></div></div>';
		}
		else 
		{
			notificationContent = false;
		}
	});

	//======================================================
	//  Display notification on ajax add to cart
	//======================================================
	$(document).on('added_to_cart', function(event, data) {
		if (notificationContent != false)
		{
			$('#content').prepend(notificationContent);
		}
	});
  • On Child theme woocommerce/single-product/add-to-cart/variable.php and put this code:
<?php
	/**
	 * Variable product add to cart
	 *
	 * This template can be overridden by copying it to yourtheme/woocommerce/single-product/add-to-cart/variable.php.
	 *
	 * HOWEVER, on occasion WooCommerce will need to update template files and you
	 * (the theme developer) will need to copy the new files to your theme to
	 * maintain compatibility. We try to do this as little as possible, but it does
	 * happen. When this occurs the version of the template file will be bumped and
	 * the readme will list any important changes.
	 *
	 * @see     https://docs.woocommerce.com/document/template-structure/
	 * @author  WooThemes
	 * @package WooCommerce/Templates
	 * @version 3.0.0
	 */
	if ( ! defined( 'ABSPATH' ) ) {
		exit;
	}
	
	global $product;
	
	$attribute_keys = array_keys( $attributes );
	
	do_action( 'woocommerce_before_add_to_cart_form' ); ?>

    <form class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="<?php echo absint( $product->get_id() ); ?>" data-product_variations="<?php echo htmlspecialchars( wp_json_encode( $available_variations ) ) ?>">
		<?php do_action( 'woocommerce_before_variations_form' ); ?>
		
		<?php if ( empty( $available_variations ) && FALSE !== $available_variations ) : ?>
            <p class="stock out-of-stock"><?php esc_html_e( 'This product is currently out of stock and unavailable.', 'sober' ); ?></p>
		<?php else : ?>
            <div class="variations">
				<?php foreach ( $attributes as $attribute_name => $options ) : ?>
                    <div>
						<span class="label">
							<label for="<?php echo sanitize_title( $attribute_name ); ?>"><?php echo wc_attribute_label( $attribute_name ); ?></label>
						</span>
                        <span class="value">
							<?php
								$selected = isset( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ? wc_clean( urldecode( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ) : $product->get_variation_default_attribute( $attribute_name );
								wc_dropdown_variation_attribute_options( array( 'options' => $options, 'attribute' => $attribute_name, 'product' => $product, 'selected' => $selected ) );
							?>
						</span>
                    </div>
					
					<?php echo end( $attribute_keys ) === $attribute_name ? apply_filters( 'woocommerce_reset_variations_link', '<a class="reset_variations" href="#">' . esc_html__( 'Clear', 'sober' ) . '</a>' ) : ''; ?>
				<?php endforeach; ?>
            </div>
			
			<?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>

            <div class="single_variation_wrap">
				<?php
					/**
					 * woocommerce_before_single_variation Hook.
					 */
					do_action( 'woocommerce_before_single_variation' );
					
					/**
					 * woocommerce_single_variation hook. Used to output the cart button and placeholder for variation data.
					 * @since  2.4.0
					 * @hooked woocommerce_single_variation - 10 Empty div for variation data.
					 * @hooked woocommerce_single_variation_add_to_cart_button - 20 Qty and cart button.
					 */
					do_action( 'woocommerce_single_variation' );
					
					/**
					 * woocommerce_after_single_variation Hook.
					 */
					do_action( 'woocommerce_after_single_variation' );
				?>
            </div>
			
			<?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
		<?php endif; ?>
		
		<?php do_action( 'woocommerce_after_variations_form' ); ?>
    </form>

<?php
	do_action( 'woocommerce_after_add_to_cart_form' );
  • Put this blank function on functions.php file on Hanger theme child theme
<?php
    function wvs_shopkeeper_theme_support() {}

OR

remove_action( 'init', 'wvs_shopkeeper_theme_support' );
  • Copy tm-robin/woocommerce/content-product.php to your child theme tm-robin-child/woocommerce/content-product.php
  • At bottom of file just add <?php do_action( 'wvs_pro_variation_show_archive_variation') ?> this line before last </div>
  • NOTICE: this theme doesnot support Plugin Display position settings
  • Your page should look like this:
<?php
/**
 * The template for displaying product content within loops
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/content-product.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @author  WooThemes
 * @package WooCommerce/Templates
 * @version 3.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

global $product;

// Ensure visibility.
if ( empty( $product ) || ! $product->is_visible() ) {
	return;
}

$classes = array(
	'product',
	'product-loop',
);

$classes[] = TM_Robin_Helper::get_grid_item_class( apply_filters( 'tm_robin_shop_products_columns', array(
	'xs' => 2,
	'sm' => 2,
	'md' => 3,
	'lg' => 3,
	'xl' => get_option( 'woocommerce_catalog_columns', 3 ),
) ) );

$products_hover = apply_filters( 'tm_robin_products_hover', tm_robin_get_option( 'products_hover' ) );

$classes[]      = 'product-style-hover--' . $products_hover;

$other_classes = apply_filters( 'tm_robin_shop_products_classes', '' );
$classes[]     = $other_classes;

$shop_view_mode = TM_Robin_Woo::get_shop_view_mode();

$buttons_class   = array( 'product-buttons--' . apply_filters( 'tm_robin_product_buttons_scheme', tm_robin_get_option( 'product_buttons_scheme' ) ) );
$buttons_class[] = wp_is_mobile() ? 'mobile' : '';

?>
<div <?php post_class( $classes ); ?>>
	<?php woocommerce_show_product_loop_sale_flash(); ?>
	<div class="product-thumb">
		<?php

		TM_Robin_Woo::wishlist_button();

		/**
		 * woocommerce_before_shop_loop_item_title hook.
		 *
		 * @hooked woocommerce_template_loop_product_link_open - 5
		 * @hooked woocommerce_template_loop_product_thumbnail - 10
		 * @hooked woocommerce_template_loop_product_link_close - 15
		 */
		do_action( 'woocommerce_before_shop_loop_item_title' );
		?>
		<div
			class="product-buttons product-buttons--<?php echo esc_attr( tm_robin_get_option( 'product_buttons_scheme' ) ); ?><?php echo wp_is_mobile() ? ' mobile' : ''; ?>">

			<?php
			TM_Robin_Woo::quick_view_button();
			woocommerce_template_loop_add_to_cart();
			TM_Robin_Woo::compare_button();
			?>

		</div>
		<?php if ( $products_hover == 'info' ) { ?>
			<div class="product-info">

				<?php

				/**
				 * woocommerce_shop_loop_item_title hook.
				 *
				 * @hooked woocommerce_template_loop_product_title - 10
				 */
				do_action( 'woocommerce_shop_loop_item_title' );

				/**
				 * woocommerce_after_shop_loop_item_title hook.
				 *
				 * @hooked woocommerce_template_loop_rating - 5
				 * @hooked woocommerce_template_loop_price - 10
				 */
				do_action( 'woocommerce_after_shop_loop_item_title' );

				?>
				<div
					class="product-buttons product-buttons--<?php echo esc_attr( tm_robin_get_option( 'product_buttons_scheme' ) ); ?><?php echo wp_is_mobile() ? ' mobile' : ''; ?>">

					<?php
					TM_Robin_Woo::quick_view_button();
					woocommerce_template_loop_add_to_cart();
					TM_Robin_Woo::compare_button();
					?>

				</div>
			</div>
		<?php } ?>
	</div>

	<?php if ( $products_hover == 'base' ) { ?>
		<div class="product-info">

			<?php

			/**
			 * woocommerce_shop_loop_item_title hook.
			 *
			 * @hooked woocommerce_template_loop_product_title - 10
			 */
			do_action( 'woocommerce_shop_loop_item_title' );

			/**
			 * woocommerce_after_shop_loop_item_title hook.
			 *
			 * @hooked woocommerce_template_loop_rating - 5
			 * @hooked woocommerce_template_loop_price - 10
			 */
			do_action( 'woocommerce_after_shop_loop_item_title' );

			TM_Robin_Woo::wishlist_button();
			?>
			<div
				class="product-buttons product-buttons--<?php echo esc_attr( tm_robin_get_option( 'product_buttons_scheme' ) ); ?><?php echo wp_is_mobile() ? ' mobile' : ''; ?>">

				<?php
				TM_Robin_Woo::quick_view_button();
				woocommerce_template_loop_add_to_cart();
				TM_Robin_Woo::compare_button();
				?>

			</div>
		</div>
	<?php } ?>
    
    <?php do_action( 'wvs_pro_variation_show_archive_variation') ?>
</div>

For Product Page

  • Override /wp-content/themes/vitrine/woocommerce/single-product/add-to-cart/variable.php file.
<?php
	/**
	 * Variable product add to cart
	 *
	 * This template can be overridden by copying it to yourtheme/woocommerce/single-product/add-to-cart/variable.php.
	 *
	 * HOWEVER, on occasion WooCommerce will need to update template files and you
	 * (the theme developer) will need to copy the new files to your theme to
	 * maintain compatibility. We try to do this as little as possible, but it does
	 * happen. When this occurs the version of the template file will be bumped and
	 * the readme will list any important changes.
	 *
	 * @see     https://docs.woocommerce.com/document/template-structure/
	 * @package WooCommerce/Templates
	 * @version 3.4.1
	 */
	
	defined( 'ABSPATH' ) || exit;
	
	
	global $product;
	$catalog_mode = epico_opt( 'catalog_mode' );
	
	
	// Added by Epico
	
	/* get attribute complete info */
	$taxonomy_types       = array();
	$attribute_taxonomies = wc_get_attribute_taxonomies();
	if ( $attribute_taxonomies ) {
		foreach ( $attribute_taxonomies as $tax ) {
			$taxonomy_types[ wc_attribute_taxonomy_name( $tax->attribute_name ) ] = $tax->attribute_type;
		}
	}
	
	// Show Variation title 
	$variable_title = epico_opt( 'variable_title' );
	$title_display  = '';
	
	if ( $variable_title != "0" ) {
		$title_display = 'title_display';
	}
	
	// End of Added by Epico
	
	$attribute_keys = array_keys( $attributes );
	
	do_action( 'woocommerce_before_add_to_cart_form' ); ?>

    <form class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="<?php echo absint( $product->get_id() ); ?>" data-product_variations="<?php echo htmlspecialchars( wp_json_encode( $available_variations ) ) ?>">
		<?php do_action( 'woocommerce_before_variations_form' ); ?>
		
		<?php if ( empty( $available_variations ) && false !== $available_variations ) : ?>
            <p class="stock out-of-stock"><?php esc_html_e( 'This product is currently out of stock and unavailable.', 'vitrine' ); ?></p>
		<?php else : ?>


            <!-- Edited by Epico -->
            <ul class="variations <?php echo $title_display; ?>">
				<?php foreach ( $attributes as $attribute_name => $options ) : ?>
                    <li>
                        <span class="label"><label for="<?php echo sanitize_title( $attribute_name ); ?>"><?php echo wc_attribute_label( $attribute_name ); ?></label></span>
                        ?>
                        <div class="value">
							<?php
								$selected = isset( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ? wc_clean( stripslashes( urldecode( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ) ) : $product->get_variation_default_attribute( $attribute_name );
								
								wc_dropdown_variation_attribute_options( array( 'options' => $options, 'attribute' => $attribute_name, 'product' => $product, 'selected' => $selected ) );
								echo end( $attribute_keys ) === $attribute_name ? '<a class="reset_variations" href="#">' . esc_html__( 'Clear selection', 'vitrine' ) . '</a>' : '';
							
							
							?>
                        </div>
                    </li>
				
				<?php endforeach; ?>
            </ul>
            <!-- End of Edited by Epico -->
			
			
			<?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>

            <div class="single_variation_wrap vitrine_variation_override" style="display:none;">
				<?php
					/**
					 * woocommerce_before_single_variation Hook
					 */
					do_action( 'woocommerce_before_single_variation' );
					
					/**
					 * woocommerce_single_variation hook. Used to output the cart button and placeholder for variation data.
					 * @since  2.4.0
					 * @hooked woocommerce_single_variation - 10 Empty div for variation data.
					 * @hooked woocommerce_single_variation_add_to_cart_button - 20 Qty and cart button.
					 */
					do_action( 'woocommerce_single_variation' );
					
					/**
					 * woocommerce_after_single_variation Hook
					 */
					do_action( 'woocommerce_after_single_variation' );
				?>


                <!-- Added by Epico -->
				<?php
					$ajaxClass = '';
					if ( 'yes' === get_option( 'woocommerce_enable_ajax_add_to_cart' ) ) {
						$ajaxClass = '  ajax_add_to_cart';
					}
					
					$catalog_mode_class = '';
					if ( $catalog_mode != 0 ) {
						$catalog_mode_class = 'catalog_add_to_cart';
					}
				?>
                <a class="single_add_to_cart_button button alt product_type_variable <?php echo $ajaxClass . ' ' . $catalog_mode_class; ?>" href="#" title="<?php echo esc_attr( $product->single_add_to_cart_text() ); ?>">
                    <span class="icon"></span>
                    <span class="txt" data-hover="<?php echo esc_attr( $product->single_add_to_cart_text() ); ?>">
	                    <?php echo esc_attr( $product->single_add_to_cart_text() ); ?>
		        </span>
                </a>
                <!-- End of Added by Epico -->


            </div>
			
			<?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
		<?php endif; ?>
		
		<?php do_action( 'woocommerce_after_variations_form' ); ?>
    </form>

<?php
	do_action( 'woocommerce_after_add_to_cart_form' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment