Search Results for 'css'

[aurellle]

Hi,

Thanks for your quick reply.

1 – I uploaded the Gecko Child file that you provided. However, there is a problem with duplication thumbnails. Please see screenshot attached.

The main reason I want to use vertical thumbnails is to minimise scrolling up and down in mobile view when viewing a product. I can see this option doesn’t work for mobile phone.

I tried this CSS code:

@media only screen and (max-width: 736px) {
.single-product-thumbnail .p-nav {
max-width: 100%;
position: absolute;
top: 10px;
}
.single-product-thumbnail .p-thumb {
margin-left: 0;
}
}

The thumbnails are on the left side of the product image but are shown on HORIZONTAL. (phone version)

 

***After uploading the Child theme, in my WordPress dashboard is showing a pop up saying that the Child theme version is obsolote and suggests to update my theme.

*************************

2 – Regarding the search option you provided, I prefer to keep the original version and just modify CSS.

I added the following CSS code but it shows to the left side of the screen instead of the right side as I would like. Please see SS attached.

.header__search {
height: 100%;
width: 45%;
top: 0;
right: 0;
background: rgba(0, 0, 0, .8);
}

*********************************

3 – After uploading Child theme, The product page doesn’t show the “RELATED PRODUCTS” on the bottom, only shows the “suggested products”

**************************

4 – In addition, which CSS code can I add to show “related products and suggested products” in 2 columns on PHONE ? Now it shows 1 product and is to big. I would like 2 columns like Product list page.

********************

5 – I realized that variable product page works perfect but the PRODUCT SIMPLE page doesn’t work correctly. Please see SS attached.

************************

6 – Please can you confirm if I can update WordPress to 5.6.1 version and Woocommerce to 5.0.0 version without having issues with your theme or WooCommerce Variation Swatch plugin?

Please note my page is still under construction, If you need to check one of the poducts I suggest to you the following one:

For Product variable: https://papalyne.fr/product/bavoir-bandana/
For Product simple: https://papalyne.fr/product/les-lingettes/
Thank you so much for you help

 

Regards

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

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

.btn-quickview::after {
	text-indent: 0;
	position: absolute;
	font-family: 'Pe-icon-7-stroke';
	content: "\e618";
	top: 0;
	right: -3px;
	color: #fff;
	font-size: 24px;
}
.product-image:hover .product-btn {
	opacity: 1;
	visibility: visible;
	top: 30px;
	right: 12px;
	left: auto;
	transform: inherit;
}
.btn-quickview {
	margin: 5px 0 0;
	background: none;
	text-indent: -999em;
	position: relative;
	display: inline-block;
}

Kind regards

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

[Harry]

Hi Fomorenom,

1. You mean add new products or add blog news?

2,3. Please add below code to JanStudio > Theme Option > General Layout > Custom CSS

h3.product-title, .woocommerce h3.product-title {
	margin: 0 0 10px 0;
}
.header-5 .jas-branding {
	padding: 20px 0 25px;
}

and change 10 with your number

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

@media only screen and (max-width: 736px) { 
.jas-col-md-12 .jas-container div:nth-child(3),
.jas-col-md-12 .jas-container div:nth-child(3) .vc_column_container > .vc_column-inner {padding: 0}
}

5. We will include in future update

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

.badge .sold-out {
	background: #999;
}

and change #999 with your color.

Kind regards

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

[Harry]

hi,

Please add below code to gecko-child > functions.php

add_action( 'wp_head', 'remove_page_head_category' );
function remove_page_head_category(){
remove_action( 'woocommerce_before_main_content', 'jas_gecko_wc_page_head', 15 );
}
function jas_gecko_child_wc_page_head() {
	// Remove old position of breadcrumb
	remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
	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', 'gecko' ), '<span>' . get_search_query() . '</span>' ) . '</h1>';
		} elseif ( is_shop() ) {
			$output .= '<h1 class="tu mb__10 cw">' . esc_html( cs_get_option( 'wc-page-title' ) ) . '</h1>';
			//$output .= '<p>' . 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="tu mb__10 cw">' . single_cat_title( '', false ) . '</h1>';
			//$output .= do_shortcode( category_description() );
		}
		ob_start();
			woocommerce_breadcrumb();
		$output .= ob_get_clean();
	$output .= '</div></div>';

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

and below code to gecko-child > style.css

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

Kind regards

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

[Harry]

Hi RomanPopovych,

I’m sorry woocommerce doesn’t support add picture for shipping method.

You can add below code to Claue > Theme Option > General Layoutt > Custom CSS to make it view better

.shop_table.woocommerce-checkout-review-order-table tr.shipping * {text-align: left;}
#shipping_method li {margin-bottom: 8px;}

Kind regards

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

[Harry]

Hi,

I see it now work well https://prnt.sc/y834iq.

If you want remove the line in middle please add below code to Claue > Theme Option > General Layout > Custom CSS

.jas-col-md-6.jas-col-sm-6.jas-col-xs-12.u-column1.col-1 {
	border-right: none !important;
}

Kind regards

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

[fcnet]

Hello,

Even If we move the original file there in the child theme, the css still fails.

Can you please check?

 

Thank you

John

[Sgmonster]

Hi, Harry,  I also want to show you all the codes we have pasted into the Custom CSS Style section to make sure there are no conflicts.  thank you, Tom

.result-count-order {
padding: 0 20px;
}
.filter-trigger:after {
content: ‘CLICK HERE TO FILTER’;
margin-left: 25px;
}
.product_meta {display: none;}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min—moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { .regular-logo { display: block; } .retina-logo { display: none; } }

@media only screen and (max-width: 800px) { .jas-branding { display: none;}}
.additional_information_tab, #tab-additional_information {
display: none !important;
}

@media only screen and (max-width: 800px) {
.wp-caption {
width: 100% !important;
}
}
.quickview-button {bottom: -10px; left: 0; width: 100%; opacity: 0; visibility: hidden; transition: all 0.1s;}
.product-image:hover .quickview-button {bottom: 0; opacity: 1; visibility: visible;}
.quickview-button a { background: #f2f2f2; transition: all 0.3s}
.product-btn .btn-quickview {
display: none;
}
.btn-quickview {
margin: 0;
padding: 0;
}
.quickview-button {
z-index: 99;
}
.page-head::before {
background: rgba(0, 0, 0, 0.4);
}
}
@media only screen and (min-width: 320px) {
.page-head {
padding: 20px 0;
}}

@media only screen and (min-width: 768px) {
.page-head {
padding: 50px 0;
}}

@media only screen and (min-width: 1280px) {
.page-head {
padding: 90px 0;
}}
@media only screen and (min-width: 1440px) {
.page-head {
padding: 140px 0;
}}
#shipping_method li input {
margin: 0 3px 0 0;
}
.page-head::before {
background: none;
}

[Harry]

Hi,

The button on product https://posteri.hr/proizvod/dizajniraj-majicu/ generate by plugin lumise

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

button.lumise-customize-button {
	background: #e40f08;
	border: none;
	color: #fff;
	text-transform: uppercase;
	position: relative;
	float: left;
}

Kind regards

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

[Harry]

Hi,

The button on product https://posteri.hr/proizvod/dizajniraj-majicu/ generate by plugin lumise

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

button.lumise-customize-button {
	background: #e40f08;
	border: none;
	color: #fff;
	text-transform: uppercase;
	position: relative;
	float: left;
}

Kind regards

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