Product Description in Full Width and Product Card

[[email protected]]

Dear Team,

I’m using the Gecko theme for a client website. There are two points I would request.

 

1)  I want to change the images used in the Description tab to take the full space of screen from left and right. It’s showing in a closed frame right now.

L40H7N – 40 inches – Full HD LED TV- Full Screen – A+ Grade Panel – Black

 

2) I want to change the product card with “Add to cart” button under product and “Compare button”  next to it.

https://changhongruba.com.pk/demo/shop

 

I have seen three Hover Style options in theme settings for products listing but client want to go classic  way add to cart button under the product.

 

Your help in this regard is greatly appreciated.

[Harry]

Hi,

1. Please edit product description edit the row wrap image and content and check in “Show full width” https://prnt.sc/tq0wb7

2. Please download attach file and put in gecko-child > woocommerce
and add below code to gecko-child > functions.php

function change_addtocart_link() {
    remove_action( 'woocommerce_after_shop_loop_item', 'jas_gecko_wc_add_buton' );
}
add_action('wp_head', 'change_quick_view_link');

function jas_gecko_child_wc_add_buton() {
    global $post, $jassc;

    // Get product hover style
    $hover_style = $jassc ? $jassc['hover-style'] : cs_get_option( 'wc-hover-style' );

    if ( $hover_style == 1 ) {
        // Quick view
    } elseif ( $hover_style == 2 ) {
        // Quick view
        echo '<a class="btn-quickview cp pr bs-36" href="' . get_the_permalink() . '" data-prod="' . esc_attr( $post->ID ) . '"><i class="fa fa-eye"></i><span class="tooltip pa cw fs__12 ts__03">' . esc_html__( 'Quick View', 'gecko' ) . '</span></a>';

        // Wishlist
        echo jas_gecko_wc_wishlist_button();
    }
}
add_action( 'change_addtocart_link', 'jas_gecko_child_wc_add_buton', 30 );

and below code to gecko-child > style.css

.product-button {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	position: relative;
}
.product-image .product-button > * {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}
.product-button a.button {
	opacity: 1;
	transform: scale(1);
}

And 4 you need install plugin for compare function.

Kind regards

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

[[email protected]]

Hello Harry,

Thank you so much for your reply.

I could not find any attachment as you mentioned.

Also about Add to cart button, I need something like this https://prnt.sc/tqa9lm

You can see this working here.

https://www.tclpakistan.com/smart-tv.html

Best Regards,

Shameel

[Harry]

Hi Shameel,

Sorry i forgot attach file. Please download new attach.

Please change code in fucntions.php to

function change_quick_view_link() {
    remove_action( 'woocommerce_after_shop_loop_item', 'jas_gecko_wc_add_buton' );
}
add_action('wp_head', 'change_quick_view_link');

function jas_gecko_child_wc_add_buton() {
    global $post, $jassc;

    // Get product hover style
    $hover_style = $jassc ? $jassc['hover-style'] : cs_get_option( 'wc-hover-style' );

    if ( $hover_style == 1 ) {
        // Wishlist
        echo jas_gecko_wc_wishlist_button();
    } elseif ( $hover_style == 2 ) {
        // Quick view
        echo '<a class="btn-quickview cp pr bs-36" href="' . get_the_permalink() . '" data-prod="' . esc_attr( $post->ID ) . '"><i class="fa fa-eye"></i><span class="tooltip pa cw fs__12 ts__03">' . esc_html__( 'Quick View', 'gecko' ) . '</span></a>';

        // Wishlist
        echo jas_gecko_wc_wishlist_button();
    }
}
add_action( 'woocommerce_after_shop_loop_item_title', 'jas_gecko_child_wc_add_buton', 30 );

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

[[email protected]]

Hi Harry,

 

Thank you again for quick reply.

 

I have added all the code and files provided in right places.

1)  Buttons

I can see something like this now, https://prntscr.com/tqf8i6

Buttons showing on top also after the title. We needed something like this with similar buttons like in product details page.

https://prntscr.com/tqa9lm

The WishList icon (small mouse hover show Wish List)  + Add to Cart + Compare icon (small mouse hover show Wish List)

For reference, you can see this like https://www.tclpakistan.com/smart-tv.html

2)  Product Description in Full width. I have edited product description edit the row wrap image and content and check in “Show full width”, still it does not work.

I have done it for this product for all rows, but it does not work.

CHR-DD308SP – 11 CFT – DC Inverter Refrigerator – Energy saving upto 70% – Silver

 

Can you please have a look, really appreciate your time.

 

Thank you!

[Harry]

Hi,

1. Please contact to expert at https://bit.ly/2Loo6ke to help you customize.

2. The issue because your image only width 1384px so it can’t full window https://changhongruba.com.pk/demo/wp-content/uploads/2020/07/1-12.jpg

Kind regards

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

[[email protected]]

Hi Harry,

 

1)  For the buttons you shared links of experts who will cost more than the theme itself, please guide me which theme files I need to edit in order to change the HTML of this section of products card, I will find a solution.

2) It’s not about which width of the image is currently, I think some CSS conflict or property overriding the full width, as you can see I have uploaded a high resolution image, still showing inside the frame.

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Shameelnasir,

1. Please edit file content-product.php in gecko-child > woocommerce and insert the code generate wishlist button before line 163 and the code generate compare button below line 163

2. I checked the image width is 1348px https://prnt.sc/tr9nzb can you send me the link where the image is 2560px.

Kind regards

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

[Harry]

Please add more code to fix issue number 2 in Gecko > Theme Option > General Layout > Custom CSS

.wc-single-1 .wc-tab {
padding: 35px 0;
}

Kind regards

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

[Author]

Posts