Created
August 16, 2022 22:48
-
-
Save wpacademy/627018b127a62fe73f851cdbf1fc94b6 to your computer and use it in GitHub Desktop.
CSS code for advanced ecommerce website tutorial by WP Academy
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/****************************** | |
* Description: CSS code for advanced ecommerce website tutorial by WP Academy. | |
* Author: WP Academy | |
* Author URL: https://wpacademy.pk | |
* Usage Info: | |
Please use apporopirate class names in sections or widgets as explained in the video tutorail. | |
Don't forget to replace color variable names such as '--e-global-color-primary' with your own colors | |
or global color names. | |
******************************/ | |
/* | |
* Header | |
*/ | |
.wpac-desktop-header-search .jet-ajax-search .jet-ajax-search__categories, .wpac-desktop-header-search .jet-ajax-search__submit { | |
margin-left: 0 !important; | |
} | |
.wpac-desktop-header-search .jet-ajax-search__fields-holder { | |
padding-right: 0 !important; | |
} | |
#toggleMegaMenu, #toggleMobileMenu { | |
cursor: pointer; | |
} | |
.wpac-mega-menu, .wpac-mobile-menu { | |
display: none; | |
} | |
.wpac-sticky-header.elementor-sticky.elementor-sticky--active .wpac-mega-menu, .wpac-sticky-header.elementor-sticky.elementor-sticky--active .wpac-mobile-menu { | |
top: 100px !important; | |
} | |
.wpac-sticky-header.elementor-sticky--active { | |
background: var( --e-global-color-primary ); | |
} | |
.wpac-mega-menu-list .elementor-icon-list-item:last-child .elementor-icon-list-text, .wpac-mega-menu-list .elementor-icon-list-item:last-child .elementor-icon-list-icon i { | |
color: var( --e-global-color-accent); | |
} | |
/* | |
* Homepage | |
*/ | |
.wpac-home-category-slider .elementor-swiper-button { | |
background: var( --e-global-color-primary ); | |
height: 300px; | |
align-items: center; | |
padding-left: 10px; | |
padding-right: 10px; | |
z-index: 0; | |
width: 70px; | |
} | |
.wpac-home-category-slider .elementor-swiper-button-prev { | |
margin-left: -70px; | |
border-radius: 10px 0 0 10px; | |
} | |
.wpac-home-category-slider .elementor-swiper-button-next { | |
margin-right: -70px; | |
border-radius: 0 10px 10px 0; | |
} | |
/* | |
* Single Product | |
*/ | |
.wpac-single-product-vertical-slider .woocommerce-product-gallery { | |
display: flex; | |
flex-direction: row-reverse; | |
} | |
.wpac-single-product-vertical-slider .woocommerce-product-gallery .flex-viewport { | |
flex-basis: 80%; | |
} | |
.wpac-single-product-vertical-slider .flex-control-thumbs { | |
flex-basis: 20% !important; | |
padding: 0 10px !important; | |
left: 0 !important; | |
transform: none !important; | |
max-width: 100% !important; | |
display: block !important; | |
margin-top: 0 !important; | |
} | |
.wpac-single-product-vertical-slider .flex-control-thumbs li { | |
width: 100% !important; | |
padding-left: 0 !important; | |
height: 100px !important; | |
padding: 0 !important; | |
} | |
.wpac-single-product-vertical-slider .flex-control-thumbs li img { | |
border: 2px solid #ededed !important; | |
padding: 5px !important; | |
} | |
.woocommerce span.onsale { | |
padding: 5px 15px !important; | |
text-transform: uppercase; | |
background-color: var( --e-global-color-accent ); | |
} | |
.wpac-single-product-vertical-slider span.onsale { | |
left: 130px !important; | |
} | |
.wshk-on-sale { | |
width: 100% !important; | |
text-align: center; | |
} | |
.elementor-add-to-cart .variations .value { | |
margin-bottom: 15px !important; | |
display: block; | |
} | |
/* | |
* Brands Page | |
*/ | |
.pwb-brands-cols-outer { | |
padding: 0 5px; | |
} | |
.pwb-brands-col3 { | |
margin: 15px 10px; | |
border: 2px solid #dddddd; | |
border-radius: 10px; | |
width: calc(25% - 20px) !important; | |
} | |
.pwb-brands-col3 > div, .pwb-brands-col3 p { | |
text-align: center !important; | |
} | |
.pwb-brands-col3 > div img, .pwb-brands-col3 p a { | |
display: inline-block; | |
} | |
/* | |
* Cart Page | |
*/ | |
.kadence-woo-cart-form-wrap .cart-collaterals { | |
float: none !important; | |
width: 100%; | |
padding: 15px; | |
} | |
.woocommerce-cart-form .cart-summary { | |
padding: 15px; | |
background: #f0f0f0; | |
border-radius: 10px; | |
margin-bottom: 15px; | |
} | |
.woocommerce-cart-form .cart-summary h2 { | |
font-size: 2em; | |
} | |
.woocommerce ul#shipping_method li { | |
display: inline-block; | |
} | |
.elementor-widget-woocommerce-cart .product-name a { | |
color: var( --e-global-color-primary ) !important; | |
font-weight: bold; | |
} | |
.cross-sells { | |
margin-top: 15px; | |
padding: 15px; | |
border: 1px solid #dddddd; | |
border-radius: 10px; | |
} | |
.cross-sells h2 { | |
margin-bottom: 10px; | |
font-size: 1.3em; | |
} | |
.cross-sells ul.products { | |
display: block; | |
} | |
.cross-sells ul.products li { | |
display: block !important; | |
width: 100%; | |
margin-bottom: 20px; | |
} | |
.cross-sells ul.products li > a, .cross-sells ul.products li .product-details { | |
display: block !important; | |
float: left; | |
} | |
.cross-sells ul.products li > a { | |
width: 25%; | |
} | |
.cross-sells ul.products li .product-details { | |
width: 75% !important; | |
margin: 0 !important; | |
} | |
.cross-sells ul.products li .product-details .woocommerce-loop-product__title a { | |
color: var( --e-global-color-primary ) !important; | |
} | |
/* | |
* My Account Page | |
*/ | |
.account-navigation-wrap { | |
border: none !important; | |
} | |
.woocommerce-MyAccount-navigation { | |
width: 90% !important; | |
} | |
.woocommerce-MyAccount-navigation ul { | |
margin: 0; | |
} | |
.woocommerce-MyAccount-navigation ul li:first-child a { | |
border-radius: 10px 10px 0 0 !important; | |
} | |
.woocommerce-MyAccount-navigation ul li:last-child a { | |
border-radius: 0 0 10px 10px !important; | |
} | |
.woocommerce-MyAccount-content { | |
width: 70% !important; | |
padding-left: 0 !important; | |
} | |
/* | |
* Checkout Page | |
*/ | |
.elementor-widget-woocommerce-checkout-page .woocommerce .shop_table { | |
margin: 20px 0 0 0 !important; | |
border: 2px solid #ededed !important; | |
border-radius: 10px !important; | |
border-collapse: inherit; | |
} | |
.elementor-widget-woocommerce-checkout-page .woocommerce .shop_table thead { | |
font-size: 24px !important; | |
color: #000000 !important; | |
border-bottom: 2px solid #ededed !important; | |
} | |
.elementor-widget-woocommerce-checkout-page .woocommerce .shop_table tr td { | |
border-bottom: 1px solid #ededed !important; | |
padding: 15px !important; | |
} | |
.elementor-widget-woocommerce-checkout-page .woocommerce .shop_table thead tr th, .elementor-widget-woocommerce-checkout-page .woocommerce .shop_table tbody tr td, .elementor-widget-woocommerce-checkout-page .woocommerce .shop_table tfoot tr th { | |
padding: 15px !important; | |
} | |
.elementor-widget-woocommerce-checkout-page a { | |
color: var( --e-global-color-accent ) !important; | |
} | |
.woocommerce-order .woocommerce-customer-details .woocommerce-column__title { | |
text-transform: uppercase; | |
margin-bottom: 15px !important; | |
} | |
.woocommerce-order .wc-bacs-bank-details-heading, .woocommerce-order .woocommerce-order-details__title { | |
text-transform: uppercase; | |
} | |
.wpac-checkout-page form.checkout .col2-set { | |
float: none; | |
width: 100%; | |
} | |
.wpac-checkout-page .e-checkout__order_review { | |
height: auto; | |
overflow: hidden; | |
background: #f9f9f9 !important; | |
} | |
.wpac-checkout-page .woocommerce #order_review_heading { | |
display: block; | |
width: 100%; | |
float: none; | |
padding: 0; | |
font-size: 1.5em; | |
} | |
.wpac-checkout-page form.checkout .woocommerce-checkout-review-order { | |
padding-left: 0; | |
display: block; | |
width: 100%; | |
} | |
.wpac-checkout-page .e-coupon-box p { | |
margin-top: 0; | |
} | |
.wpac-checkout-page .woocommerce-checkout-review-order-table { | |
background: transparent !important; | |
} | |
/* | |
* Order Thank You Page | |
*/ | |
.woocommerce-order .woocommerce-thankyou-order-details { | |
display: block !important; | |
text-align: center !important; | |
padding: 20px !important; | |
border: 2px solid var( --e-global-color-primary ); !important; | |
border-radius: 10px !important; | |
} | |
.woocommerce-order .woocommerce-thankyou-order-details li { | |
display: inline-block !important; | |
float: none !important; | |
width: auto !important; | |
padding: 0 20px !important; | |
margin: 0 !important; | |
font-size: 1em !important; | |
color: var( --e-global-color-primary ) !important; | |
} | |
.woocommerce-order .woocommerce-thankyou-order-details li strong { | |
margin-top: 10px; | |
} | |
.woocommerce-order .woocommerce-bacs-bank-details { | |
padding: 20px; | |
border: 2px solid var( --e-global-color-accent ); | |
border-radius: 10px; | |
margin-bottom: 20px; | |
} | |
.woocommerce-order .woocommerce-thankyou-order-received { | |
text-align: center; | |
font-size: 3em; | |
font-weight: 700; | |
font-family: "Poppins", sans-serif; | |
color: var( --e-global-color-primary ); | |
} | |
/* | |
* Other CSS | |
*/ | |
.woocommerce-notices-wrapper { | |
width: 100%; | |
max-width: 1280px; | |
margin: 10px auto; | |
padding: 0 20px; | |
} | |
.woocommerce .woocommerce-message { | |
border-radius: 5px; | |
} | |
.wpac-more-filters { | |
display: none; | |
} | |
/* | |
* Responsive Classes | |
*/ | |
@media (max-width: 1024px) { | |
.wpac-mobile-menu { | |
top: 85px; | |
} | |
.wpac-sticky-header.elementor-sticky.elementor-sticky--active .wpac-mobile-menu { | |
top: 85px !important; | |
} | |
} | |
@media (max-width: 768px) { | |
.wpac-mobile-menu { | |
top: 90px; | |
width: 100% !important; | |
height: 100%!important; | |
} | |
.wpac-sticky-header.elementor-sticky.elementor-sticky--active .wpac-mobile-menu { | |
top: 90px !important; | |
} | |
.woocommerce-MyAccount-content { | |
width: 100% !important; | |
} | |
.woocommerce-MyAccount-navigation { | |
width: 100% !important; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment