Adding gray lines for product pages and the table on cart page

  • Resolved jd3723

    (@jd3723)


    10 years, 9 months ago

    I have two sites that use Virtue theme. Site 1 displays gray divider lines, while Site 2 does not. I want both sites to display the gray divider lines.

    SITE 1: dorici.com
    Site 1 displays the individual product pages with gray divider lines between the lines for the Product Title, Price, and Product Description.
    Example: https://www.dorici.com/product/eaux-my-god-tee/

    Site 1 also displays the table on the checkout page with a gray background behind the main titles (Product, Price, Quantity, Total) and gray lines to divide each section of the table. You will have to add a product to your cart to see the table, but this is the site that properly displays the gray lines: https://www.dorici.com/shop

    SITE 2: toniromiti.com
    Site 2 does not have gray divider lines on the individual product pages. Site 2’s cart page does not display a gray background behind the main titles, nor does it have the gray lines to divide each section of the table. You will have to add a product to your cart to see the table, but this is the site that is not displaying the gray lines: https://www.toniromiti.com/shop

    MY QUESTION:
    I want toniromiti.com to display the gray lines on the cart page and the individual product pages. Can I do this somewhere under theme options? What should I do to get the gray divider lines to display on toniromiti.com?

Viewing 8 replies - 1 through 8 (of 8 total)

  • Hey Jd, try this css in your toniromiti site.

    .product_header, div.product .product_title, .pricebox, .cart{
    border-bottom: 1px solid #FFFFFF;
}

    Tell me if it works for you, you don’t understand anything I said or have any questions. I’m here to help.

    – Wolfy and Brain ∩(︶▽︶)∩

    The gray lines are actually there, but because the background is black, it’s very hard to see. You can test this by changing the background color to white. You should be able to see the gray lines, then.

    Thread Starter jd3723

    (@jd3723)

    Wolfs bRain- Thank you. That works for showing the lines on the product page, but it still doesn’t show the lines on the “Shopping Cart” page.

    CrouchingBruin, is there any way that I can change the color of the gray lines to make them more visible? I need to see the lines on the /cart page.

    Try adding this CSS to your child theme’s style.css file:

    .pricebox {
border-color: rgba(238,238,238,.5);
}
.woocommerce-message,
table.shop_table tr,
.cart-collaterals .cart_totals table,
.cart-collaterals .cart_totals table tr {
border: solid 2px rgba(238,238,238,.5);
}
table.shop_table,
.cart-collaterals .cart_totals table {
border-collapse: collapse;
border-spacing: 2px;
}

    Thread Starter jd3723

    (@jd3723)

    Perfect! Thanks CrouchingBruin, you’re a lifesaver.

    Thread Starter jd3723

    (@jd3723)

    One last thing: Is there any way that I can add the border/box around the variable product options? For example, I’d like a box, border lines, or a different background color to make the “Size: Choose an Option” section on this page stand out:
    https://toniromiti.com/product/bish-whet-tee-w-2/

    This will make the Choose an Option dropdown look and act like your Add To Cart button:

    .customSelect {
   background: rgba(147, 147, 147, 1);
}
.customSelect.customSelectHover {
   background: rgba(204, 204, 204, 1);
}

    Thread Starter jd3723

    (@jd3723)

    Great. Thanks again!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Adding gray lines for product pages and the table on cart page’ is closed to new replies.