Please submit a private ticket if you need to share sensitive information, such as license details and admin credentials.

Okay
  Public Ticket #3843326
Add padding / Product title isnt displaying only on main page
Open

Comments

  •  2
    victor started the conversation

    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

  •  1,408
    Dustin replied

    Hi Victor,

    Please add below CSS code to WP-Admin → Appearance → Customize → Additional CSS:

    .woosq-popup {
        border-radius: 8px;
    }
    
    .woosq-popup h1.entry-title, .woosq-popup .product_title {
        display: block;
    }

    And the result:

    5150507897.png

    Best regards,
    Dustin

  •  2
    victor replied

    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

  •  2
    victor replied

    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;
    }


  •  1,408
    Dustin replied

    Please add the CSS code below (to WP-Admin → Appearance → Customize → Additional CSS) to increase the popup's height:

    .woosq-popup {
        max-height: 560px;
    }
    
    .woosq-product > .product> div {
        height: 560px;
    }

    And the result will be like this:

    7842560493.png

    To add a divider, please try the CSS code:

    .woosq-popup .single_variation_wrap {
        padding-top: 20px;
        border-top: 1px dashed #ddd;
    }

    4215277361.png

    Best regards,
    Dustin

  •  2
    victor replied

    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