H4 style - by Aaron - on WordPress WooCommerce support

This topic has 31 replies, 3 voices, and was last updated 5 years, 10 months ago ago by Olga Barlow

  • Avatar: Aaron
    Aaron
    Participant
    December 14, 2018 at 11:22

    I can’t seem to replicate a change on my main site over on my staging site despite copying the h4 css from the live site over to staging, can you help? Or tell me which elements to edit in which files?

    https://woocommerce-204609-682099.cloudwaysapps.com/categories.png this is how it should look on both sites

    I need to make sure the staging site looks like the main site 100% before I publish it back to the production site

    Please, contact administrator
    for this information.
    30 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    December 14, 2018 at 13:34

    Hello,

    I can’t log in your staging site http://prntscr.com/luwch4 please check.
    Font size of “PRODUCT CATEGORIES” title can be changed in settings of the element that was used to add it http://prntscr.com/luwgic
    For this http://prntscr.com/luwlae try to add this custom css code on the staging site:

    .category-grid .categories-mask {
        padding: 0;
    }
    .category-grid .categories-mask .count {
        text-transform: uppercase;
        text-decoration: none;
    }
    .category-grid .categories-mask {
        font-family: 'Lato', Arial, Tahoma sans-serif;
    }

    Regards

    Avatar: Aaron
    Aaron
    Participant
    February 8, 2019 at 10:44

    Hi Rose,

    This didn’t work unfortunately.

    Could you take another look? I’ll provide details for the staging site in the private content area.

    Many thanks

    Please contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 8, 2019 at 10:59

    Hello,

    I can’t log in. Please check.
    Please URL and wp-admin access where do you have problems after the updating. Describe in more details what exactly was broken.

    Regards

    Avatar: Aaron
    Aaron
    Participant
    February 8, 2019 at 11:21

    Hi Rose,

    I think you should be able to log in now, please see private content area.

    Many thanks

    Edit: If you still have issue, please use Incognito/Private window. This solves the problem for me.

    Please contact administrator
    for this information.
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    February 8, 2019 at 12:24

    Hello,

    1) Your prefooter area was added to header banner area.
    2) Home page was not set in Settings > Reading.
    3) You need to choose the Lato font in Typography settings and I chose the bold style for the headings
    4) I have added the following custom to increase the categories font-size

    .category-grid .categories-mask h4 {
        font-size: 1.71rem;
        margin: 0.3em 0;
    } 

    5) I have updated the WPBakery (Visual Composer) plugin.

    Check the staging site now and let me know if you need to fix anything else.

    Regards

    Avatar: Aaron
    Aaron
    Participant
    February 8, 2019 at 12:47

    Hi Olga,

    Thank you, that does look a lot better now.
    Unfortunately the categories boxes still do not look like the main website, please see the example images:

    Main site: https://www.dropbox.com/s/ms8hooilccggj93/Untitled.png?dl=0
    Staging: https://www.dropbox.com/s/p8znvfkhucr0zgr/staging.png?dl=0

    Regarding the other issues – can I now backup the xstore configuration and use this to import it on the main website when I update the theme there? Will this fix any of the issues I faced with the staging site, prefooter area in the header etc?

    I also notice that my top header and the bottom footer data is not the same as the main website, is this overwritten when the theme gets updated?

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    February 8, 2019 at 14:11

    Hello,

    Try to clear browser cache https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=en and check again, for me it looks in the following way http://prntscr.com/mide8k

    Regards

    Avatar: Aaron
    Aaron
    Participant
    February 8, 2019 at 14:49

    Hi Olga,

    That looks perfect now! Could you let me know where this css is so I can apply it to the main website after the update?

    Could you also let me know about the header and footer sections – it seems to have overwritten what was there previously with a different menu (header) and default text/links (footer). Is this not included in the import/export in xstore settings? You can compare openhouseproducts.com with openhouseproducts.com/oh1

    My last question:
    https://www.dropbox.com/s/k30mofl5cl3119r/sorting.png?dl=0
    How do I hide this? If I add visibility:hidden to .woof_products_top_panel then it leaves a big gap.

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    February 8, 2019 at 15:17

    Hello,

    1) All the CSS improvements were made in Theme Options > Custom CSS > global custom CSS + Theme Options > Typography. You can expost options from the staging site (Theme Options > Import/Export > http://prntscr.com/miedx1 ) and import to production site after update (Theme Options > Import/Export > http://prntscr.com/mieedf )

    2) It just widgets are messed up on your staging site and it’s not because of the update but because of the creation of staging site. All you need is just make sure that all the widgets are in the correct widget areas (Appearance > Widgets)

    3) This is the element of one of your plugin, filter plugin I suppose https://codecanyon.net/item/woof-woocommerce-products-filter/11498469 . Check the plugin settings or contact plugin author and ask if you can disable this filter.

    Regards

    Avatar: Aaron
    Aaron
    Participant
    February 8, 2019 at 17:10

    Thanks Olga.

    I seem to have fixed widgets now.

    Could you please help me with my navigation menu?

    See below screenshots:

    Live site: https://www.dropbox.com/s/i1x0kj6q9xbc1gp/Live-Menu.png?dl=0
    Staging site: https://www.dropbox.com/s/ock1soye4tb05hh/Staging-Menu.png?dl=0

    I’d like the staging site menu text to match the live site – the font size, spacing, font, hover color, etc.

    Also please see the ___ underneath ‘Home’ on the menu, when you are on that page it used to have a line underneath the active page, can that be added back in the new version of the theme?

    Avatar: Aaron
    Aaron
    Participant
    February 8, 2019 at 17:11

    and can the product title be put back into the top section rather than underneath? See on the old version ‘UNDERSEAT STORAGE BAG’: https://www.openhouseproducts.com/product/under-seat-storage-bag/

    Avatar: Aaron
    Aaron
    Participant
    February 11, 2019 at 11:21

    Olga / Rose – are these adjustments something you can help with? We really liked these elements of the older version of the theme and would love to have the latest version match.

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    February 11, 2019 at 12:04

    Hello,

    1) Menu styles you can change in Theme Options > Typography > Menu http://prntscr.com/mji3em

    2) I have added underline using Custom CSS.

    3) Theme Options > Single Product > http://prntscr.com/mji4bv

    Regards

    Avatar: Aaron
    Aaron
    Participant
    February 11, 2019 at 12:59

    Thanks Olga, the site is almost perfect now.
    I’m really struggling to get the menu to look like it does on the main site at the moment. I am using inspect element and converting the rem to px and updating the staging site but the menu still doesn’t look like it should.
    Can you help me? I’ve cleared all my changes at the moment as it doesn’t look right.
    I’m struggling to determine what options relate to the titles ‘CATEGORIES’ ‘OFF THE SHELF BAGS’ ‘MEDICAL’ ‘DEFIBRILLATORS’ and the size/font colour/font hover colour, and what options relate to the categories below, their font size and their colour/hover colour.
    I have sucessfully managed to transform it all to UPPERCASE as it should be.

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    February 11, 2019 at 13:20

    Hello,

    Check now http://prntscr.com/mjj9bo
    I have changed the Typography options, and Custom CSS, so re-load Theme Options without saving if you had them opened to avoid overwriting.

    Regards

    Avatar: Aaron
    Aaron
    Participant
    February 11, 2019 at 13:57

    Thank you for all your help, it looks perfect now. 🙂

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 11, 2019 at 14:02

    Hello,

    You’re welcome!

    Regards

    Avatar: Aaron
    Aaron
    Participant
    February 11, 2019 at 14:21

    Hi Rose, sorry, I’ve one last query!
    Is it possible to remove this gap between the slider and the blocks? https://www.dropbox.com/s/v17vmhfounxvl8e/homepage.png?dl=0

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 11, 2019 at 14:26

    Hello,

    There is a default margin-bottom – 35px, so you need to set 0px –
    https://prnt.sc/mjkct0

    Regards

    Avatar: Aaron
    Aaron
    Participant
    February 12, 2019 at 13:10

    Hi Rose/Olga.

    When I tried to import all of this on my main website, the widgets have gone haywire:
    https://www.dropbox.com/s/q3xzdbggp42bwba/widgets.png?dl=0

    I even deleted every widget and then re-imported my backup (the same backup I re-imported on the /oh1/ staging site that worked). I did this because for some reason the widgets messed up on the staging site the first time I updated the theme.

    Here are the steps I took:
    – Put site into maintenance mode
    – Delete all widgets
    – Activate a default theme on your site (Appearance – Themes);
    – Delete current xstore theme via FTP from /wp-content/themes/ folder and upload the new extracted theme folder;
    – Rename et-core-plugin in wp-content/plugins/ on your server and upload new version of the plugin (you will be able to delete the old plugin version later);
    – Activate xstore
    – Import theme settings json file
    – Import widgets file

    Again, I deleted every widget and re-imported my widgets backup to see if this solved the issue and it did not.

    Did I miss a step? Do I need to run through XStore setup wizard when I activate the theme?

    I am having to restore my production site to the last backup to fix the widget issues, but I do need a resolution to this so that I can attempt the upgrade again.

    Thanks

    Avatar: Aaron
    Aaron
    Participant
    February 12, 2019 at 13:13

    For comparison this is how the widgets should appear:
    https://www.openhouseproducts.com/oh1/?product=vanguard-patient-overnight-bag

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    February 12, 2019 at 14:51

    Hello,

    Restore your backup. After that provide us with Dashboard and FTP access to your production site and we’ll update theme for you. Don’t remove our access to your staging site because we will need theme options and custom from that site.

    Regards

    Avatar: Aaron
    Aaron
    Participant
    February 12, 2019 at 17:39

    Thanks Olga.
    Details are in private content area.

    Please contact administrator
    for this information.
    Avatar: Aaron
    Aaron
    Participant
    February 13, 2019 at 10:36

    When you log into SFTP you can delete all themes with ‘xstore’ in the name that are there already

    Avatar: Aaron
    Aaron
    Participant
    February 13, 2019 at 11:36

    Hi Olga,

    Theme update is great, only one issue that I can see!
    Can you help me fix this text?

    Old version: https://www.dropbox.com/s/g6lm3axodmyt7dq/old.png?dl=0
    Current version: https://www.dropbox.com/s/nku6isl942w0vhj/new.png?dl=0

    Edit: do you know what the scrolling error is on 404 pages? http://www.openhouseproducts.com/sdfsdfsdffds

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    February 13, 2019 at 13:02

    Hello,

    If you want to remove that effect add the following

    .page-404 .largest {
        background: none;  
        text-fill-color: #000000;
        -webkit-text-fill-color: #000000;
        
    }

    I have improved the categories font for the mobile. Check and let me know if you need any other help.

    Regards

    Avatar: Aaron
    Aaron
    Participant
    February 13, 2019 at 15:19

    Hi Olga,
    It fixed the issue on mobile but on smaller displays it looks weird still – https://www.dropbox.com/s/2txu0affnkw1ztv/hnf.png?dl=0

    Thanks!

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    February 13, 2019 at 16:52

    Check again.

    Regards

    Avatar: Aaron
    Aaron
    Participant
    February 15, 2019 at 10:22

    Olga, just wanted to thank you for all your help with this.

    I updated the theme to your latest version (dated 14th Feb) with no issues at all, really happy with how smooth everything is now. Thank you!

  • 1 2
    Viewing 30 results - 1 through 30 (of 31 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.