How to Style Divi Woo Pages

Written by Syed Zeerak

April 8, 2020

Watch the Video Here


The Code I Used

need to watch in order to install wordpress on a local server.


/******** SHOPPING CART PAGE – OVER 980 PX ONLY *****/

@media screen and (min-width: 980px) {
.checkout-button {
width: 100% !important;
float: right !important;
/***** Checkout Button, style how you would like *****/
color:#FFF !important;
.woocommerce-page.et_pb_button_helper_class button.button {
/***** Checkout Button, style how you would like *****/
color:#FFF !important;



.cart_totals {
float: right !important;
width: 32% !important;
border: solid 2px #f2f2f2;
margin-bottom: 0px;
padding-bottom: 0px;

.woocommerce-cart .wc-proceed-to-checkout {
padding: 1em 0 0 0;

.woocommerce-page.et_pb_button_helper_class a.button {
margin-bottom: 0px !important;


.woocommerce table.shop_table {
float: left !important;
width: 63% !important;


.woocommerce-page table.cart td.actions .coupon {
float: left;
width: 100%;


.woocommerce-page.et_pb_button_helper_class button.button, .woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled] {
width: 60%;
margin-bottom: 10px;



/***** Heading, change according to taste ***/
.cart_totals h2, .shipping_calculator h2 {
background-color: ##f24405 !important;
font-family: ‘Montserrat’, sans-serif;
color: #FFF !important;
padding: 5px !important;
text-align: center !important;
border-radius: 3px !important;
margin-bottom: 0px !important;

Bonus Stuff

If you’re from Pakistan, India, Bangladesh or Nepal or If you can understand Urdu/Hindi , then I’ve got some special stuff for all of you guys. Check out my complete Divi Series in Urdu/Hindi where I explored each and everything of Divi and Unlocked all the creative possbilities. 


Any Questions?


Submit a Comment

Your email address will not be published. Required fields are marked *

Stay Up to Date With The Latest News & Updates

Connect With Me

Connect with me on social media and get the latest updates from me.