Badge on product page image gallery

  • Hi, I have tried the free version of Woocommerce Badge Management but it does something weird with the image gallery on the product page. The badge shows on every image in the gallery and the gallery images cannot be clicked anymore. Also on mobile screen, the product page looks very confusing as all the badges overlap each other in the horizontal image gallery. Can you have a look if this can be resolved in any way or if this is a known bug? Here is a link to a product page that I have included the badge in as a test. Thanks for your answer! Best, Erik

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author YITHEMES

    (@yithemes)

    Hi Erik,
    and thank you for writing in!

    You can fix this issue by adding the following code snippet to your theme functions.php:

    if ( function_exists( 'YITH_WCBM_Frontend' ) && !is_admin() ) {
	remove_filter( 'woocommerce_single_product_image_thumbnail_html', array( YITH_WCBM_Frontend(), 'show_badge_on_product_thumbnail' ), 99 );
}

if ( !function_exists( 'yith_wcbm_customization_badge_container_start' ) && !function_exists( 'yith_wcbm_customization_badge_container_end' ) ) {
	add_action( 'woocommerce_before_single_product_summary_product_images', 'yith_wcbm_customization_badge_container_start', 9 );
	add_action( 'woocommerce_before_single_product_summary_product_images', 'yith_wcbm_customization_badge_container_end', 11 );

	function yith_wcbm_customization_badge_container_start() {
		do_action( 'yith_wcbm_theme_badge_container_start' );
	}

	function yith_wcbm_customization_badge_container_end() {
		do_action( 'yith_wcbm_theme_badge_container_end' );
	}
}

    and the following code snippet to Appearance > Customize > Additional CSS:

    .thumbnail_wrapper .yith-wcbm-badge{
    display: none;
}

.yith-wcbm-badge{
    z-index: 9999;
}

    Please try this solution and let us know if everything works fine!

    • This reply was modified 4 years, 11 months ago by YITHEMES.
    Thread Starter gio153

    (@gio153)

    Hi,

    thanks for the code you sent. I have included the first part via Code Snippets, and the second part via the theme customizer. However I see no difference yet on the product page, for example:

    https://blokkenpiloot.nl/product/lego-ninjago-kai-avatar-arcade-pod-71714/

    Thanks, Erik

    Plugin Author YITHEMES

    (@yithemes)

    Hi there,
    please add following CSS code in your site, it will help you to hide badge on thumbnails.

    .product-thumbnails-vertical-wrapper .yith-wcbm-badge {
    display: none;
}

.product-thumbnails-horizontal-wrapper .yith-wcbm-badge {
    display: none;
}

    About issue on mobile device, I saw it and it’s due to an incompatibility with the slider used by your theme. I’m sorry but we can’t assist you on it.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Badge on product page image gallery’ is closed to new replies.