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
Oldest
Newest Most Voted
Inline Feedbacks
View all comments

More to explorer

Elementor Multi-Column Dropdown

https://youtu.be/72L8eLoIrCU Target all dropdown menus @media(min-width:767px) { /* When hovering over a menu item that has children, display its submenu as a

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

45 Minute Wordpress Support

Get your Wordpress questions answered and your Wordpress issues resolved.