I’m trying to add padding around my Quick View box, but I can’t seem to find any CSS code that adds 8x padding and rounds all my corners. Could you provide some quick CSS for that?
Also, for some reason, the product title doesn’t display on my homepage, but it shows up on all other pages.
image12..46 is box I want to add padding around to round-off corners. and you see its showing product title.
New iusse popped up - How do I contain text so it all displays as one without having to scroll? and how do I add a divider between packsize and add to cart
I’m trying to add padding around my Quick View box, but I can’t seem to find any CSS code that adds 8x padding and rounds all my corners. Could you provide some quick CSS for that?
Also, for some reason, the product title doesn’t display on my homepage, but it shows up on all other pages.
image12..46 is box I want to add padding around to round-off corners. and you see its showing product title.
image 12.47 - no title displayed on main page
Attached files: Screenshot 2025-03-22 at 12.46.09 PM.png
Screenshot 2025-03-22 at 12.47.53 PM.png
Hi Victor,
Please add below CSS code to WP-Admin → Appearance → Customize → Additional CSS:
And the result:
Best regards,
Dustin
easy like Sunday morning fixed ( Thanks).
New iusse popped up - How do I contain text so it all displays as one without having to scroll? and how do I add a divider between packsize and add to cart
Attached files: Screenshot 2025-03-22 at 2.07.32 PM.png
here is my current css used
/* 🔹 Ensure the Image Container is Properly Sized */
#woosq-popup .images {
flex: 1;
max-width: 99%; /* Adjusts the width for better balance */
display: flex;
justify-content: center;
align-items: center;
background: #f8f8f8;
padding: 20px;
min-height: 400px; /* Keeps a consistent height */
}
/* 🔹 Border Radius for Various Elements */
.envato-kit-139-accordion .elementor-widget-container,
.envato-kit-139-map iframe,
.envato-kit-139-slider .slick-slide,
.envato-kit-139-flipbox .elementor-flip-box div {
border-radius: 10px !important;
}
/* 🔹 Table Styling */
table tbody > tr:nth-child(odd) > td,
table tbody > tr:nth-child(odd) > th {
background-color: transparent;
}
/* 🔹 Pack Size Dropdown (Ensure White Background) */
#woosq-popup .variations_form select {
background-color: #ffffff !important;
color: #333 !important;
border: 1px solid #ccc !important;
padding: 8px 12px !important;
font-size: 16px !important;
border-radius: 5px !important;
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
}
/* 🔹 Parent Container of Pack Size Dropdown */
#woosq-popup .variations_form {
background-color: #ffffff !important;
padding: 10px !important;
border-radius: 5px;
}
/* 🔹 "Add to Cart" Button */
#woosq-popup .single_add_to_cart_button {
background-color: #000000;
color: #ffffff;
border: none;
padding: 11px 20px;
font-size: 17px;
border-radius: 8px;
cursor: pointer;
transition: all 0.5s ease;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}
/* 🔹 Button Hover Effect */
#woosq-popup .single_add_to_cart_button:hover {
background-color: #FF5A02;
color: #ffffff;
transform: scale(1.05);
}
/* 🔹 Disabled Button State */
#woosq-popup .single_add_to_cart_button:disabled {
background-color: #cccccc;
color: #666666;
cursor: not-allowed;
opacity: 0.6;
}
/* 🔹 Quantity Box */
#woosq-popup .input-text.qty {
width: 60px;
height: 40px;
padding: 8px 10px;
font-size: 16px;
border: 1px solid #333;
border-radius: 5px;
text-align: center;
}
/* 🔹 Quantity Box Focus Effect */
#woosq-popup .input-text.qty:focus {
border-color: #FF5A02;
outline: none;
}
/* 🔹 Close Button */
#woosq-popup .mfp-close {
background-color: transparent !important;
color: #333333 !important;
border: none;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
transition: transform 0.3s ease, color 0.3s ease;
}
/* 🔹 Close Button Hover Effect */
#woosq-popup .mfp-close:hover {
color: #FF5A02;
transform: rotate(90deg);
}
/* 🔹 Product Price Styling */
#woosq-popup .summary-content .price ins {
color: #FF5A02;
font-weight: bold;
}
#woosq-popup .summary-content .price del {
color: #888888;
text-decoration: line-through;
margin-right: 5px;
}
/* 🔹 Product Title */
.product_title.entry-title {
font-family: 'Roboto', sans-serif;
font-size: 26px;
font-weight: 700;
color: #333333;
margin-bottom: 20px;
text-align: left;
line-height: 1.4;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
/* 🔹 Mobile Adjustments */
@media (max-width: 768px) {
.product_title.entry-title {
font-size: 24px;
text-align: center;
}
}
/* 🔹 Hide "Added to cart" Message */
.woocommerce-message {
display: none !important;
}
/* 🔹 Hide Subscription Options */
#woosq-popup .wcsatt-sub-options {
display: none !important;
}
/* 🔹 Add Spacing Between "Purchase One Time" and "Subscribe" */
#woosq-popup .wcsatt-options-wrapper .wcsatt-option {
margin-bottom: 15px;
}
/* 🔹 Make the Selected Radio Label Bold */
#woosq-popup .wcsatt-options-wrapper input[type="radio"]:checked + span {
font-weight: bold !important;
color: #FF5A02 !important;
}
.woosq-popup {
border-radius: 8px;
}
.woosq-popup h1.entry-title, .woosq-popup .product_title {
display: block;
}
Please add the CSS code below (to WP-Admin → Appearance → Customize → Additional CSS) to increase the popup's height:
And the result will be like this:
To add a divider, please try the CSS code:
Best regards,
Dustin
Sorry I have another issue popup - How do I auto align quick view button for all my products display? the css code isnt working for me.
/* Set a fixed height for each product card */
ul.products li.product {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%; /* fallback */
min-height: 400px; /* Adjust based on your design */
box-sizing: border-box;
}
/* Make product content fill vertical space */
ul.products li.product .woocommerce-loop-product__link {
flex-grow: 1;
}
/* Align the Quick View button at the bottom */
ul.products li.product .woosq-btn.custom-add-to-cart {
margin-top: auto;
width: 100%;
}
Attached files: Screenshot 2025-03-23 at 11.57.31 AM.png