Home Forums Themes Support Gecko Support

This topic contains 5 replies, has 2 voices, and was last updated by  Harry 3 weeks, 5 days ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #29782

    Hi,

    I need some help but not sure if it is within the support. But I hope you can help me up πŸ™‚

    I am trying to customise my own design using the theme Gecko.

    1. As can be seen from the attached image #1, I have used woocommerce cart count and cart subtotal codings I found on the internet, trying to position them fitting into the background cash register, however, I was not able to do it quite well due to my lack of coding knowledge and hence they are way out of the position. Would like to ask if you are able to help me up with this minor positioning issue? How can I position them using CSS?
    2. Another thing is, I think the above mentioned woocommerce cart count and cart subtotal that I found on internet does not update any cart changes automatically. May I ask where can I find the code you have used for the shopping cart count in the theme Gecko? Is it some AJAX issue that my own codings cannot automatically update without refreshing the page?
    3. With reference to attached image #2, there is a white blank portion on the SHOP page, but the white blank portion does not appears on other web pages. How can I remove (eg. display: none) the white blank portion on the SHOP page?
    4. As seen in attached image #3 mobile version, I believe the design got cut off due to the background images I have added to the header and container. May I ask how can I code it in css to have the mobile version reflects the entire design exactly from the web version?

    Thank you so much and your help is appreciated! <3

    Really love the theme Gecko but would just like to add a little something (cute design) to it πŸ™‚

    Let me know if you need the admin account and admin password for the website.

     

     

    Attachments:
    You must be logged in to view attached files.
    #29788

    Hi,

    1. Please edit your code to

    .tlccarttotal {
    	padding-left: 496px;
    	color: #fff;
    	margin-top: -20px;
    	display: block;
    }
    .tlcitemcount {
    	padding-left: 492px;
    	color: #000;
    	font-size: 12px;
    	font-weight: bold;
    	font-family: 'Poppins';
    }
    

    and remove a br tag above cart amount.

    2. The code for cart update is

    function jas_gecko_wc_render_mini_cart() {
    	$output = '';
    	wc_clear_notices();
    
    	ob_start();
    		$args['list_class'] = '';
    		wc_get_template( 'cart/mini-cart.php' );
    	$output = ob_get_clean();
    
    	$result = array(
    		'cart_total'    => WC()->cart->cart_contents_count,
    		'cart_html'     => $output,
    		'cart_subtotal' => WC()->cart->get_cart_total()
    	);
    
    	echo json_encode( $result );
    	exit;
    }
    add_action( 'wp_ajax_load_mini_cart', 'jas_gecko_wc_render_mini_cart' );
    add_action( 'wp_ajax_nopriv_load_mini_cart', 'jas_gecko_wc_render_mini_cart' );

    on line 407 in gecko > core > libraries > vendors > woocommerce > init.php

    3. Please add below code

    .woocommerce .jas-container .products {margin-bottom: 0;}

    4. Please use below code

    @media only screen and (max-width: 800px) {
    .top-bar-below {background-size: contain;}
    div.header__mid.pl__30.pr__30 {
    	max-width: 100%;
    	background-size: contain;
    }
    .boxed #jas-content {
    	max-width: 100%;
    	background-size: contain;
    }}

    Kind regards

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

    #29932

    Hi,

    1. According to Picture #1 as attached, there is still white portion at the bottom of the product pages on web version, how can I remove the white portion?
    2. According to Picture #2 as attached, how can I remove (eg. display:none;) the Gecko header on mobile version.
    3. According to Picture #2 as well, there is also a white portion at the top in the header area on mobile version, how can I remove this white portion as well?
    4. According to Picture #3, I noticed that for the checkout page on web version, the YOUR ORDER table overflow out of the ombre border that I have. How can I make the YOUR ORDER table content fit well within the ombre borders on the right side? Just like how the BILLING & SHIPPING fits well on the left side.
    5. According to Picture #4 as attached, the content on theΒ checkout page on mobile version, overflow a little out of the ombre border on both left and right sides. How can I make it to have the checkout page content fit well within the ombre borders on the mobile version?

    As always, thank you so much for your help!

    Attachments:
    You must be logged in to view attached files.
    #29944

    Hi,

    1. Please add below code to JanStudio > Theme Option > General Layout > Custom CSS

    .jas-wc-single.wc-single-1.mb__60 {
    	margin-bottom: 0;
    }

    2,3,4,5. Please change prev code in 4 step to

    select#shipping_method_0.shipping_method {
    	width: 200px;
    }
    @media only screen and (max-width: 800px) {
    .top-bar-below {background-size: contain;}
    div.header__mid.pl__30.pr__30 {
    	max-width: 100%;
    	background-size: contain;
    	height: auto;
    	background-position: center;
    }
    .boxed #jas-content {
    	max-width: 100%;
    	background-size: contain;
    }
    .retina-logo {
    	display: none !important;
    }
    select#shipping_method_0.shipping_method {
    	width: 100%;
    }
    .checkout > div {
    	padding: 0 10px;
    }}
    @media only screen and (max-width: 736px) {
    .jas-row.jas-page {
    	padding: 0 15px;
    }}

    Kind regards

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

    #29963

    Hi,Β  thank you so much for the help!!! really appreciated! ^^

    All the codings worked well, except for:

    1. The header area when viewed under mobile version. As seen from the attached ‘Picture mobile’ image, the header becomes positioned as a ‘logo’ instead of as a ‘background’. How can I make the header in the mobile version same to what seen in the web version (refer to attached ‘Picture web’ image)?

     

    Attachments:
    You must be logged in to view attached files.
    #29972

    Hi,

    Please change prev code to

    select#shipping_method_0.shipping_method {
    	width: 200px;
    }
    @media only screen and (max-width: 800px) {
    .top-bar-below {background-size: contain;}
    div.header__mid.pl__30.pr__30 {
    	max-width: 100%;
    	background-size: cover;
    	height: 170px;
    	background-position: center;
    }
    .boxed #jas-content {
    	max-width: 100%;
    	background-size: cover;
    }
    .retina-logo {
    	display: none !important;
    }
    select#shipping_method_0.shipping_method {
    	width: 100%;
    }
    .checkout > div {
    	padding: 0 10px;
    }}
    @media only screen and (max-width: 736px) {
    .jas-row.jas-page {
    	padding: 0 15px;
    }
    div.header__mid.pl__30.pr__30 {
    	background-size: contain;
    	height: 114px;
    }
    .boxed #jas-content {
    	max-width: 100%;
    	background-size: contain;
    	padding: 0 15px;
    }}

    Kind regards

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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.