Home › Forums › WoodMart support forum › Add CSS into a layout

Add CSS into a layout

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 14, 2025 at 3:53 pm #638157

    Xristos
    Participant

    Hello,

    How can I insert CSS code into a specific layout (The layout is for Single product)?
    For example, inside <div data-elementor-type=”wp-post” data-elementor-id=”486″ class=”elementor elementor-486″> I want to insert the CSS display: inline-grid

    I don’t want to add the CSS Global.

    Best Regards,
    Chris

    February 15, 2025 at 8:26 am #638278

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    Navigate to Layouts > Edit the specific layout for the single product page. Click on the container where you want to apply the CSS. Scroll down to the Advanced tab, then find the Custom CSS section. Add your CSS rule, targeting the specific class inside Elementor.

    This method ensures the CSS applies only to that specific layout without affecting other parts of your website. The Custom CSS option is available in Elementor Pro.

    For more details follow this guide: https://elementor.com/help/how-to-add-custom-css/

    Best Regards,

    February 17, 2025 at 1:26 pm #638657

    Xristos
    Participant

    I can do this without having the Elementor Pro?

    I mean is there another way?

    February 18, 2025 at 8:26 am #638860

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    You can apply CSS without Elementor Pro by targeting the custom layout ID. Find the layout ID by hovering on the layout title.

    Use the ID in your CSS rule like this:

    [data-elementor-id="28118"] .single_add_to_cart_button {
    display: none
}

    Add the code in Theme Settings > Custom CSS.

    Best Regards,

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)