• Working within WooCommerce (OceanWP is theme), editing with Elementor.

    There are lines surrounding certain widgets on the single product page that I would like to remove. The widgets are: Product Price, Custom Add To Cart, Product Meta

    I added the following to Appearance > Customize > Custom CSS

    .single .entry-title, .product_meta, .woocommerce div.product form.cart, table td {
            border: none;
    }

    And while this did work for the widget lines, it ALSO removed the lines in my tables down in the product description area (Product Data Tabs), which I NEED.

    How do I ONLY remove around the following widgets: Product Price, Custom Add To Cart, Product Meta

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Hello @traeonna,

    The outline is not an issue. It’s an accessibility requirement (we’re required to use it). But you can disable it on your end with custom CSS. To remove the outline, please add the following CSS code in the Custom CSS area in the Customizer:

    a:focus {
        outline: 0px !important;
        outline: none !important;
    }

    If you want to do that only for these widgets: Product Price, Custom Add To Cart, Product Meta, use the following CSS:

    Please read this link about the CSS code on the Customizer:
    https://docs.oceanwp.org/article/354-add-custom-css-and-js-to-your-website

    .single-product .detail-content a:focus,
    .woocommerce ul.products li.product .woo-entry-inner li a:focus {
        outline: 0px !important;
        outline: none !important;
    }

    For more information about Accessibility, please read this article: https://developer.mozilla.org/en-US/docs/Web/Accessibility.

    Note: if you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes.

    Best Regards

Viewing 1 replies (of 1 total)
  • The topic ‘WooCommerce Single Product remove lines between widgets’ is closed to new replies.