WordPress.org

Ready to get started?Download WordPress

Forums

Crafty Cart Theme using Woocommerce sidebar issues (15 posts)

  1. Killertron
    Member
    Posted 1 year ago #

    Hi I currently have a site up and running at http://www.kixclothing.com/clothingstore

    I am having a few issues with the sidebar not displaying in the correct place on the products pages. It is displayed below the items as opposed to on the left where it should be.

    I have tried to fix this but I am struggling to come up with a solution. Any help would be appreciated.

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Looks okay in Firefox, but if it's misbehaving in another browser, it might be the second validation error:

    http://validator.w3.org/check?uri=http%3A%2F%2Fkixclothing.com%2Fclothingstore%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

  3. Killertron
    Member
    Posted 1 year ago #

    I seem to have fixed a lot of the issues however one problem that remains is the login and shipping forms are misaligned. Is there an easy method to fix this?

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Are you using this very outdated version of the theme?

    http://wordpress.org/extend/themes/crafty-cart

    If so, you'd really be well advised to find another theme...

  5. Killertron
    Member
    Posted 1 year ago #

    Yes but I've got to hand this project in soon for University is there no way to amend this? as I have come to far with this theme to change now.

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Possibly, but I don't see any login page or shipping form - if you link to those pages, I'll look at them.

  7. Killertron
    Member
    Posted 1 year ago #

    If you click on the my account page it will take you to a login page. currently you can view the shipping form when you have an item purchased on the checkout page where you can also create an account.

  8. Killertron
    Member
    Posted 1 year ago #

    Apologies I was messing around testing another theme but it is back up now if you'd care to look.

  9. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Okay, got it - the login form can be fixed with this:

    .woocommerce form.login .form-row-last {
        float: none;
    }

    BUT you also have a bunch of CSS errors that are messing up your CSS - I had to put the above at the start of the style.css file to get it to work. So you'll need to find and fix the errors that are invalidating code:

    http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fkixclothing.com%2Fclothingstore%2Fmy-account%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

    I'll look at the other one now.

  10. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Looks like those form fields have the same problem - it's because they have the .form-row-last class assigned to them - and that class has the float right from here:

    .woocommerce form .form-row-last, .woocommerce-page form .form-row-last {
        float: right;
    }

    So the better way to fix them is to remove that class from those fields rather than having to make a CSS hack for each one - as I did above.

  11. Killertron
    Member
    Posted 1 year ago #

    Thank you I will go through each file and attempt to fix any syntax errors I can and then try the code you provided to see if it has worked.

  12. Killertron
    Member
    Posted 1 year ago #

    Which CSS file is the .form-row-last class found in?

  13. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    WooCommerce, but changing things there may cause problems elsewhere.

  14. Killertron
    Member
    Posted 1 year ago #

    Ok and if I were to edit the forms in the same way as the log in form which is now positioned correctly, are they all under one form class or would I have to edit them all individually?

  15. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    I'm not sure but it looks like you can do it this way - it's not elegant but should work - look at the HTML for the ones you need to fix and find the id for that element - for example this:

    <p id="billing_last_name_field" class="form-row form-row-last validate-required">

    You can then use the id with this CSS to get rid of the float:

    #billing_last_name_field {
       float: none !important;
    }

    You'll need to use the !important rule so it will override the existing CSS.

Topic Closed

This topic has been closed to new replies.

About this Topic