Skip to content

Instantly share code, notes, and snippets.

Last active Jun 24, 2021
What would you like to do?
CSS code for Pizza Shop Tutorial on WP Academy
* Custom CSS code for pizza shop tutorial
* Author: Mian Shahzad Raza
* Author URI:
.wapf-field-row {
margin-bottom: 10px;
.wapf-field-label {
font-size: 22px;
text-transform: uppercase;
font-weight: bold;
border-radius: 5px 5px 0 0;
position: relative;
height: 50px;
line-height: 50px;
background-color: #d94637;
color: #ffffff;
.wapf-field-input {
padding: 20px 10px 0px 10px;
border: 2px solid #d94637;
border-radius: 0 0 5px 5px;
border-top: none;
.wapf-field-label label {
height: 100%;
padding-left: 15px;
display: inline-block;
.wapf-radios .wapf-checkable input, .wapf-checkboxes .wapf-checkable input{
display: none;
.wapf-radios {
text-align: left;
.wapf-checkable {
display: inline-block;
margin-right: 10px;
margin-bottom: 10px;
.wapf-radios label, .wapf-checkboxes label{
position: relative;
color: #333;
background-color: #ededed;
font-size: 16px;
text-align: center;
height: 40px;
line-height: 35px;
display: block;
cursor: pointer;
border: 2px solid #f0f0f0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 5px;
.wapf-label-text {
padding-right: 10px;
.wapf-pricing-hint {
color: green;
font-weight: bold;
.wapf-radios .wapf-checked .wapf-pricing-hint, .wapf-checkboxes .wapf-checked .wapf-pricing-hint {
color: #000;
font-weight: bold;
.wapf-radios .wapf-checked > label, .wapf-checkboxes .wapf-checked > label {
border: 2px solid #2fcc71;
background-color: #2fcc71;
color: #fff;
font-weight: bold;
transition: 0.5s all;
.wapf-radios .wapf-checked > label:after, .wapf-checkboxes .wapf-checked > label:after{
content: "\2713";
width: 25px;
height: 25px;
line-height: 20px;
border-radius: 100%;
border: 2px solid #fff;
background-color: #2fcc71;
z-index: 999;
position: absolute;
top: -14px;
right: -14px;
color: #fff;
.wapf-checkboxes .wapf-checked > label:after {
top: -10px;
right: -10px;
.wpac-pizza-shop-single form.cart {
flex-direction: column;
.wpac-pizza-shop-single form.cart .quantity {
text-align: center;
.wpac-pizza-shop-single form.cart .quantity input {
display: inline-block;
width: 200px;
margin-bottom: 10px;
.wpac-pizza-shop-single form.cart .button {
margin-left: 0 !important;
width: 250px;
float: none !important;
margin: 0 auto !important;
.wpac-custom-shop-css .products-list-view {
grid-template-columns: 100% !important;
.wpac-custom-products-loop .entry {
background-color: transparent !important;
box-shadow: none;
.wpac-custom-tabs .elementor-tab-title {
padding: 10px 20px;
background-color: #000;
margin: 0 10px;
.wpac-custom-tabs .elementor-tab-title.elementor-active {
background-color: #D94637;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment