Front page product slider

[mariosvns]

Hello, i am configuring the template and i can’t find how to customize the product slider.

Have a look on the image attached:

A – No. 1 – I want it to show an icon not ‘Quick Shop’ or if not possible to show ‘Quick view’

No. 2  – I want it to show an icon not ‘Add to cart’

I can’t find any styling settings to change color etc and i don’t want to change my theme colors cause its effecting other elements om the site.

No.3 – what are these letters? Can i get rid of them?

B –  Is there a way to make the navigation always on? (not on hover) and if possible to show it out of the slider.

The navigation to be visible, i have to hover exactly where the arrow is located, so there are not many chances for the visitor to know that he can scroll.

C – How i would like the slider to look.

I hope you can help…

Thanks

• This topic was modified 4 years, 1 month ago by mariosvns.
• This topic was modified 4 years, 1 month ago by mariosvns. Reason: Typo
• This topic was modified 4 years, 1 month ago by mariosvns. Reason: Uploaded the correct miage - The 3rd one

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Mario,

A,B,C .Please add below code to Claue > Theme Option > General Layout > Custom CSS

.btn-quickview, .product-image .product-btn .button, .product-image .added_to_cart {
	line-height: 40px;
	margin: 0 10px;
	text-indent: -999em;
	background: #000;
	position: relative;
}
.btn-quickview::after,
.product-btn .button:after {
	position: absolute;
	content: '\e618';
	font-family: 'Pe-icon-7-stroke';
	left: 50%;
	top: 50%;
	text-indent: 0;
	color: #fff;
	font-size: 24px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.flex.column.product-btn {
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: row;
	flex-direction: row;
}
.btn-quickview::after {
	content: '\e618';
}
.btn-quickview::after {
	content: '\e66e';
}
.slick-prev {
	left: -35px;
}

.slick-next {
	right: -35px;
}

.slick-prev, .slick-next {
	color: #fff !important;
background-color: #5f021f;
border-color: #5f021f;
}

A3, You can change in Product > Attributes > Size > Configure Term or you can hide it in Claue > Theme Option > WooCommerce > Product Listing Settings > Enable Products Attribute On Product List and uncheck the field

Kind regards

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

[mariosvns]

Thank you so much. So quick and on point, thank you!

[Harry]

You’re welcome!

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

[mariosvns]

Hello again,

the cart button is showing the quick view and the magnifier button show the cart.

Can we fix it?

I need the cart button to add to the cart the product and the magnifier to show the quick view.

also if you can make the 2 buttons the same size…

Thank you in advance!

Attachments:

You must be logged in to view attached files.

[Harry]

Sorry please change code to

.btn-quickview, .product-image .product-btn .button, .product-image .added_to_cart {
	line-height: 40px;
	margin: 0 5px;
	text-indent: -999em;
	background: #000;
	position: relative;
	padding: 0;
	width: 50px;
}
.btn-quickview::after,
.product-btn .button:after {
	position: absolute;
	font-family: 'Pe-icon-7-stroke';
	left: 50%;
	top: 50%;
	text-indent: 0;
	color: #fff;
	font-size: 22px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.flex.column.product-btn {
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: row;
	flex-direction: row;
}
.btn-quickview::after {
	content: '\e618';
}
.product-btn .button:after {
	content: '\e66e';
}
.slick-prev {
	left: -35px;
}

.slick-next {
	right: -35px;
}

.slick-prev, .slick-next {
	color: #fff !important;
background-color: #5f021f;
border-color: #5f021f;
}

Kind regards

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

[Author]

Posts