Problems to fix on product (category) pages

[maittaleb01]

Hallo,

1. On product page when variation swatch  image is selected, if there is only one image to show for that particular variation,  i  want to hide the  product tumbnail gallery:  See link  https://ibb.co/VNYTHpT.

The end result would be like this: https://ibb.co/9GCSDQp .  When i click on another variation that has 2 images, the gallery returns again:  https://ibb.co/RpKBb04

2.  I want to  customize every category pages by adding a text field (for SEO) at bottom of the page above footer with wpbakery.  How can i do that. I want to edit category pages with wpbakery backend or frontend editor like you can do with pages. Is there some php code that i can add?

[Harry]

Hi,

1. Please add below code to claue-child > functions.php

add_action( 'woocommerce_product_thumbnails', 'enable_gallery_for_multiple_thumbnails_only', 5 );
function enable_gallery_for_multiple_thumbnails_only() {
    global $product;

    if( ! is_a($product, 'WC_Product') ) {
        $product = wc_get_product( get_the_id() );
    }

    if( sizeof( $product->get_gallery_image_ids() ) == 1 ) {
        remove_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );
    }
}

2. Please add more code to claue-child > functions.php

function jas_claue_child_wc_page_head() {
	if ( ! cs_get_option( 'wc-enable-page-title' ) || ( class_exists( 'WCV_Vendors' ) && WCV_Vendors::is_vendor_page() ) ) return;

	$title = cs_get_option( 'wc-page-title' );

	$output = '<div class="page-head pr tc"><div class="jas-container pr">';
		if ( is_search() ) {
			$output .= '<h1 class="mb__5 cw">' . sprintf(__( 'Search Results for: %s', 'claue' ), '<span>' . get_search_query() . '</span>' ) . '</h1>';
		} elseif ( is_shop() ) {
			$output .= '<h1 class="mb__5 cw">' . esc_html( cs_get_option( 'wc-page-title' ) ) . '</h1>';
			$output .= '<p class="mg__0">' . do_shortcode( cs_get_option( 'wc-page-desc' ) ) . '</p>';
		} else {
			// Remove old position of category description
			remove_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
			$output .= '<h1 class="cw">' . single_cat_title( '', false ) . '</h1>';
			//$output .= do_shortcode( category_description() );
			add_action( 'woocommerce_after_shop_loop', 'woocommerce_taxonomy_archive_description', 40 );
			add_action( 'woocommerce_after_shop_loop', 'woocommerce_product_archive_description', 40 );
			
		}
		ob_start();
		$output .= ob_get_clean();
	$output .= '</div></div>';

	echo wp_kses_post( $output );
}
add_action( 'woocommerce_before_main_content', 'jas_claue_child_wc_page_head', 15 );

and add below code to claue-child > style.css

.term-description {
	display: block;
	width: 100%;
	max-width: 1170px;
	margin: 30px auto;
}

It only support you show description to below product and can’t control description with page builder.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[maittaleb01]

Hi

1. Code for hiding image gallery works only when loading page first time for MAIN product image gallery. But not for variation image gallery. Still same problem as in  https://ibb.co/VNYTHpT . see also https://ibb.co/8DyZ2vK

 

[maittaleb01]

2. I now have field 0n top of each other. But one has to go above footer : https://ibb.co/xMwgGHb

[Harry]

Hi,

1. It can’t check when the gallery load again. For this i recommend upload all images to gallery, and upload 2 yellow images for yellow gallery

2. Please add more code to claue > functions.php above the code for step 2

/* move category description below products */
add_action( 'wp_head', 'remove_my_action' ); 
function remove_my_action(){
	remove_action( 'woocommerce_before_main_content', 'jas_claue_wc_page_head', 15 );
}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[maittaleb01]

1.  I dont understand. Could you please elaborate.
2. It worked. thank you

[Harry]

Hi,

1. I mean upload 2 image for general gallery and 2 yellow image for yellow gallery https://prnt.sc/qjh9do

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[maittaleb01]

Thank you.

3. On product page when i am on mobile (only one column) , i want the product title to be above main image.

4. At every product page In de breadcrumb i want product title name and the  ”>” sign  before title name removed.

Please see link for clarification : https://ibb.co/m0GxZjN

[Harry]

Hi,

3,4. need more customize, please contact to expert team at https://bit.ly/2Loo6ke

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[maittaleb01]

hi There

5. With Variation swatch , ”show on product list” is set to ”yes” , but i want to set it a maximum of 4 products. How can i do that. So if i have a product with 6 variations, you only see the first 4 variation images  in product listing .

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

Please add below code to Claue > Theme Option > General Layout > Custom CSS

.swatch__list .swatch__list--item:nth-child(n+5) {display: none;}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[maittaleb01]

Thank you . that did the job

[maittaleb01]

5. The code you gave me also hides the variation images on product pages. How do i prefend that?

[Harry]

Hi,

Please change code to

.products .swatch__list .swatch__list--item:nth-child(n+5) {display: none;}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[maittaleb01]

Yes thank you that worked out nicely.

6.  I would like try out breadcrumb snippet from rankmath:

<?php if (function_exists(‘rank_math_the_breadcrumbs’)) rank_math_the_breadcrumbs(); ?>

I tried to put this in functions.php of childtheme but no changes on product and category pages, default breadcrumb is still visible. Is this the correct file ?

 

 

[maittaleb01]

Hallo

 

7. When I inspect product pages i get the following:  DOM Found 2 elements with non-unique id #pa_color . See attachment for explanation.

It only appears on product pages ( all of them). How do I fix this?  (edit post. Sorry for duplicate attachment)

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

6. Please copy file layout-1.php in claue > core > libraries > vendors > woocommerce > templates > extra > single to claue-child > woocommerce > extra > single

and change code on line 52

woocommerce_breadcrumb();

to

echo do_shortcode( '[rank_math_breadcrumb]' );

7. Please go to Theme Option > WooCommerce > Product Detail Settings > Enable Sticky Add To Cart > Off.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[maittaleb01]

Hi,

6. the short code gave me error. I changed it to:   rank_math_the_breadcrumbs();     and it works

7. Works Perfect

I see that   echo do_shortcode( ‘[rank_math_breadcrumb]’ );     works too

[maittaleb01]

Hi there,

8. I have image variation swatch active for product list, but i want to change that to just attribute colors for product list. On the products page i want to keep the image swatches , please see attachment.

The reason for this is that i want to improve page speed. Now when i go to homepage and category pages. the product images and also variation images are being downloaded. that will lower my page speed. I turned off  showing variation swatch on product list and that improved page speed a lot, but i want to show that are variations available. I tried to add color to attributes of variation, but didnt see changes.

Do you have any solution for this? Thank you very much.

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

1. Please download attach files:

– Extract and replace class-wcvs-settings.php in folder > plugins > wpa-woocommerce-variation-swatch > includes > admin

Extract and replace wcvs-template-hooks.php in folder > plugins > wpa-woocommerce-variation-swatch > includes

2. Go to Dashboard > WPAddon > Variation Swatch > Show image swatch on product list > No

Kind regards

Attachments:

You must be logged in to view attached files.

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[maittaleb01]

8. Works Perfectly.  Thank you for always responding so quickly. you guys are the best 🙂

[Author]

Posts