• Resolved julia20202020

    (@julia20202020)


    Hello!

    I am a first timer. Just purchase the hosting and playing with the website, installed the WOOCommerce plugin, and my check out page is not displaying properly. It seems like the CSS do not load. Please point me in the right direction.

    Thank you so much!

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Support Senff – a11n

    (@senff)

    Hi @julia20202020

    When I look at your checkout page, I’m not seeing anything missing right away. Here’s what I see:

    Aside from the fact that it doesn’t contain any products, can you give us some more details about what’s not looking right on your end?

    Thread Starter julia20202020

    (@julia20202020)

    Thank you Senff!

    I took screenshots of what I see. How do I attach them here?

    If you could please put add a product to the shopping card, maybe then you will see what I see. If you go to “Practice with me” and then choose June 29 “5 sessions Rise and Shine” then “Book appointment” you should see the check out page then. And It’s not rendering right.

    Thank you,
    Julia

    Plugin Support Senff – a11n

    (@senff)

    I see what you mean now.

    The reason why it’s not showing well is mainly due to your theme, and the way it’s incorporating the Bootstrap platform.

    You can fix this with a little bit of custom CSS code. Go into your site’s admin Dashboard and select Appearance → Customize → Additional CSS. In the CSS textbox on the left, add the following code:

    .woocommerce-checkout .col-1 {
      max-width:100%;
    }

    Select “Save Changes” from the top, and your changes will be applied to your site.

    Thread Starter julia20202020

    (@julia20202020)

    Thank you Senff!

    It fixed it! Now the input boxes are there.

    The section “Additional information” still looks strange. It’s squeezed to the right side of the screen, and the input box is tool small. How do I move it under the other fields?

    Thank you!

    Thread Starter julia20202020

    (@julia20202020)

    Also, the page displays the “Country / Region *” element twice. Is there something I can do about it?

    Thank you!

    Plugin Support Senff – a11n

    (@senff)

    You can make it look a little bit better by adding this CSS code:

    #billing_country_field > span .select2-container{
      display: none; 
    }
    
    #customer_details > div {
      width: 100%;
      max-width: 100%;
      margin-bottom: 20px;
    }
    
    #customer_details > div.col-2 .woocommerce-input-wrapper {
      width: 300px;
    }
    Plugin Support fevered – a11n

    (@fevered)

    Hey there, since we haven’t heard back from you I’ll mark this thread as resolved now. If you have any further questions, I recommend creating a new thread.

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

The topic ‘The checkout page doesn’t load CSS properly’ is closed to new replies.