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

Share on facebook
Facebook
Share on twitter
Twitter
Share on reddit
Reddit
Share on whatsapp
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

Add Icons To Your Elementor Form Fields With CSS

https://youtu.be/8qHZfpG2z-s Font Awesome fontawesome.com CSS Code /*placeholder spacing*/ selector form.elementor-form .elementor-field-group-email input, .elementor-field-group-name input, .elementor-field-group-phone input, .elementor-field-group-message textarea{ padding-left: 50px; } /*Icon

How To Create A Mobile App Menu On Elementor

https://youtu.be/7iJz3km-nwM Create Your Glass Effect Here: glassmorphism.com Mobile Section /*Mobile section*/ selector{ position: fixed; width: 100%; bottom: 0px; background: rgba( 0, 0,

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

45 Minute Wordpress Support

Get your Wordpress questions answered and your Wordpress issues resolved.