Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1280942
    [email protected]
    Participant

    Hi, I’m having difficulty editing the woo commerce pages, they don’t seem to edit in cornerstone for some reason.

    They seem to have a white background that ignores the style that I have created throughout the site.

    The URL is http://djidee.net/staging/wordpress/shop/ ā€Ž

    I’d like to be able to make the store content fit in the left 2/3rds and be able to use the same title styling as I have throughout the rest of the page, over all the woocommerce pages.

    Thank you again in advance you guys have been excellent so far.

    #1281064
    Lely
    Moderator

    Hi There,

    By default, Woocommerce pages are controlled by a template and cannot be edited using Cornerstone. When we assigned pages on Woocommerce settings, the templates will take control of the page content. The stack you were using define the design.

    Go to Appearance > Customize > Layout and Design > Content Layout: Choose Content Left Sidebar Right. This will make your content on the left. The width will depend on Content Width (%) property. To add content on the space on the right, please go to Appearance > Sidebar.

    Hope this helps.

    #1283043
    [email protected]
    Participant

    Thank you that seemed to do half the job, the other problem is the white background that shouldn’t be there at all, still sits on the left now when it shouldn’t be there at all.

    and I’d like to be able to change the styling of the headings to be the same as the rest of my website thank you.

    #1283160
    Thai
    Moderator

    Hi There,

    Please add the following CSS under Customizer > Custom > Global CSS:

    .x-container.main:before {
        display: none;
    }
    
    .woocommerce h1.h-landmark {
        overflow: hidden;
    }
    .woocommerce h1.h-landmark span {
        padding-bottom: 2px;
        display: inline-block;
        position: relative;
    }
    .woocommerce h1.h-landmark span:before,
    .woocommerce h1.h-landmark span:after {
        border-top: 2px solid #5a268d !important;
        border-bottom: 1px solid #f0f7ff !important;
        content: "";
        position: absolute;
        top: 50%;
        width: 9999px;
        display: block;
        margin-top: 0;
        border-top: 1px solid rgba(0,0,0,0.1);
    }
    .woocommerce h1.h-landmark span:before {
        right: 100%;
        margin-right: 0.75em;
    }
    .woocommerce h1.h-landmark span:after {
        left: 100%;
        margin-left: 0.75em;
    }

    Hope it helps šŸ™‚

    #1285384
    [email protected]
    Participant

    Thank you that worked well.
    Only problem I have now is the individual item pages have a transparent background that sits on top of the main transparent background which creates a weird effect

    also the title text is black unlike the rest of my page.
    IF you could help me with that, that would be great thanks.
    I’d also like the description box and any other box in the shopping section to fit 2/3rds on desktop

    #1285416
    [email protected]
    Participant

    Also I would like the same title styling to the cart and checkout and account pages thank you.

    #1285687
    Lely
    Moderator

    Hello There,

    You can use this to make it white:

    .single-product.x-boxed-layout-active .site {
        background: #ffffff;
    }

    Or this, just to remove the transparent background on top of transparent background

    .single-product .x-main.full {
        background: transparent;
    }

    For the title, please update this part:

    .woocommerce h1.h-landmark span {
        padding-bottom: 2px;
        display: inline-block;
        position: relative;
    }

    To this:

    .woocommerce h1.h-landmark span {
        padding-bottom: 2px;
        display: inline-block;
        position: relative;
        color: #5a268d;
    }

    That change will take effect on all woocommerce pages including cart, checkout, shop, single product page and archive pages too.

    Are you referring to single product page here:
    I’d also like the description box and any other box in the shopping section to fit 2/3rds on desktop
    Please confirm.

  • <script> jQuery(function($){ $("#no-reply-1280942 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>