Elementor Pro Single Product Page Tutorial | Custom Woocommerce Shop #2

Facebook
Twitter
Reddit
WhatsApp

Make sure to watch my previews video to have a better understanding.

CSS:

				
					/* Product Gallery*/
.woocommerce div.product div.images img {
display: block;
width: 70%;
height: auto;
box-shadow: none;
margin: auto;
}
.woocommerce div.product div.images .flex-control-thumbs {
position: relative;
margin: 50px -150px 0px 0px;
}


/* Onsale*/
.woocommerce span.onsale {
background-color: #ffffff​;
color: #000;
font-weight: 600;
}


/* Site Font*/
h1, h2, p, a, span, div {
font-family: "Play", Sans-serif;
}


/* Add to cart button*/
.woocommerce div.product.elementor .quantity .qty {
display: inline;
}


/* Product Data Tabs*/
a {
color: yellow;
}
a:hover {
color: yellow;
}
.woocommerce #respond​ input#submit​, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
background-color: white;
color: black;
border: none;
border-radius: 100px;
padding: 10px 30px
}


/* Secure Checkout Box*/
@media only screen and (max-width:1133px){
selector{
width: 60%;
}
}
@media only screen and (max-width:1025px){
selector{
width: 80%;
}
}
@media only screen and (max-width:768px){
selector{
width: 100%;
}
}
				
			
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments

More to explorer

How To Make a Hover Card Like a PRO in Elementor

https://youtu.be/pja-7Sfn8WI CSS selector .card-content{ height: 56%; margin-bottom: -134px; transition: all 0.5s ease; } selector .card-wrapper:hover .card-content{ margin-bottom: 0px; height: 100%; } selector

Elementor Button Border Gradient Tutorial

https://youtu.be/I9am2K_yopc Border Gradient Button CSS selector .elementor-button{ position: relative; overflow: hidden; z-index: 1; margin-bottom: -15px } selector .elementor-button:before{ content: ”; position: absolute;

0
Would love your thoughts, please comment.x
()
x

45 Minute Wordpress Support

Get your Wordpress questions answered and your Wordpress issues resolved.