Product Category Page/ Shop Page - by Vikfom

This topic has 28 replies, 3 voices, and was last updated 5 years ago ago by Rose Tyler

  • Avatar: Vikfom
    Vikfom
    Participant
    February 11, 2019 at 13:51

    Hello!
    I have few question about Product Category Page/ Shop Page:
    1) How to delete categories from the left side of the page (desktop version). I delete them from widgets, but nothing changed.
    2) How to make product pictures square?
    3) How to make only one product in a row instead of 2 in mobile version?
    4) How to delete “Newsletter” and “Log in / sign up” from the header?
    5) How to make logo bigger (size) in the mobile version?

    Thank you in advance.

    Please, contact administrator
    for this information.
    27 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 11, 2019 at 14:00

    Hello,

    1) Theme Options > Shop > Shop page Layout > Sidebar position on category page > Widthout.
    2) https://xstore.helpscoutdocs.com/article/89-product-images
    3) Theme Options > Custom css > Custom css for mobile:

    .products-grid .product {
        width: 100%;
    }

    4) Theme Options > Promo Popup, Theme Options > Header > Header layout > Sign In link position.
    5) Theme Options > Custom css > Global custom css:

    @media only screen and (max-width: 992px){
        .header-logo img {
            max-width:  150px !important;
        }
    }

    Regards

    Avatar: Vikfom
    Vikfom
    Participant
    February 15, 2019 at 11:35

    Hello!
    Thank you for your help.
    3) I was trying to add your code to Theme Options > Custom css > Custom css for mobile in empty place
    .products-grid .product {
    width: 100%;
    }
    to make only one product in a row in a mobile version but nothing changed.
    How to add it properly?

    5) Same with logo – I was trying to add your code to Theme Options > Custom css > Global custom css to make logo bigger (size) in the mobile version
    @media only screen and (max-width: 992px){
    .header-logo img {
    max-width: 150px !important;
    }
    But nothing changed. How to add it properly?

    Thank you in advance.

    Please contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 15, 2019 at 11:42

    Hello,

    3) Please clear cache and check one more time.
    5) Please make sure that you added the code http://prntscr.com/mlfrpl
    Clear all cache before checking the result.

    Regards

    Avatar: Vikfom
    Vikfom
    Participant
    February 15, 2019 at 13:53

    I cleared the cache and now there is one product in a row in a mobile version.

    5) But the size of the logo didn’t change.
    There is also a sign in front of max-width: 150px !important;
    It disappeared only when I delete ” !important “;
    And anyway logo is still the same.

    Can I make it bigger than 150px?

    Can you check please?

    Please contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 15, 2019 at 13:59
    Avatar: Vikfom
    Vikfom
    Participant
    February 19, 2019 at 09:52

    Hello Rose Tyler,

    Thank you for your help!
    I have one more question.
    How to move menu from the left side to the right side on the mobile version (3 lines with drop down menu)? I want to put it on the right side from the shopping cart.

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

    Hello,

    You’re welcome!
    Add this code

        .navbar-toggle {
            left:  unset;
            right: 0;
            z-index: 9;
        }
        .navbar-header .ico-label-right:first-of-type {
            margin-right: 3em;
        }

    here – https://prnt.sc/mn2crb

    Regards

    Avatar: Vikfom
    Vikfom
    Participant
    February 19, 2019 at 11:48

    Dear Rose Tyler,

    Thank you.
    I have few more questions:
    1) I inserted the code and menu button is on the right side now, but when I click on it, menu opens on the other side (on the left side). How to locate the menu on the right side from the menu button after clicking the button?

    2) How to change the height and the width of the slider (big banner) on the desktop version and on the mobile version? And how to put button more down on the slider?

    Thank you in advance.

    Please contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 19, 2019 at 13:47

    1)

    .mobile-menu-wrapper {
        right: 0;
        left:  unset;
        transform: translateX(300px);
    }

    2) You can edit these settings depends on your needs – http://prntscr.com/mn5sii http://prntscr.com/mn5sq1 http://prntscr.com/mn5ti9 http://prntscr.com/mn5trj

    Regards

    Avatar: Vikfom
    Vikfom
    Participant
    February 20, 2019 at 10:55

    Hello Rose Tyler,

    Thank you!
    I have one more question regarding footer.
    Can I make subcategories in a drop down menu in a mobile version like on the website https://skullbliss.com/ (please check mobile version).
    For example category Customer service will be visible and subcategories (Contact Us, Shipping, Return Policy….) will be hidden. And when you click on a category you open subcategories.
    How can I make it?

    Thank you in advance.

    Please contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 20, 2019 at 11:09

    Hello,

    You can create footer using a stick block.
    https://youtu.be/hmsxW5KF9dg
    Hide some content for mobile and show others on mobile http://prntscr.com/mnl6pw
    For example, you can use http://prntscr.com/mnl73q > https://gyazo.com/ddf14f998a6a58029beee8bca447913b

    Regards

    Avatar: Vikfom
    Vikfom
    Participant
    March 14, 2019 at 15:53

    Hello Rose Tyler,

    I have few more question about another website.
    1) I made a Shop Page my Home Page. How to install 8theme slider and 8theme Instagram on the Shop Page? I inserted all in the page via WP Bakery Page Builder but I can not see slider and instagram on a shop page.

    2) When I put the cursor on a Home at Menu on a desktop version I see the drop down menu. How to turn it off?

    3) How to edit menu on a mobile version? I want to delete Log In/ Sign Up from mobile menu.

    Thank you in advance.

    Please contact administrator
    for this information.
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    March 14, 2019 at 18:18

    Hello,

    1) This option should be enabled http://prntscr.com/mxwt4f (Theme Options > Shop)
    2) Disable mega menu and static block in menu settings http://prntscr.com/mxwuun
    3) Go to Header > Mobile header http://prntscr.com/mxwvhm

    Regards

    Avatar: Vikfom
    Vikfom
    Participant
    March 15, 2019 at 14:37

    Hello Olga Barlow,

    Thank you for your help!

    I installed 8theme slider and 8theme Instagram on the Shop Page. But how to move 8theme Instagram block below the products? I want the slider to be the first on the page, after products and below products – instagram. How to do it?

    Thank you in advance!

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 15, 2019 at 14:58

    Hello,

    Create a static block with this content http://prntscr.com/myb33s and add the block in Appearance > Widgets > After the products area https://prnt.sc/myb3rx or set it as prefooter for the Shop page – https://prnt.sc/myb4bk

    Regards

    Avatar: Vikfom
    Vikfom
    Participant
    March 19, 2019 at 15:00

    Hello Rose Tyler,

    Thank you for your help. I did everything that you wrote.

    But how to disable instagram static block on the product page?

    Thank you in advance.

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 19, 2019 at 15:15

    You can use this code to disable prefooter on Single product page –

    .single-poroduct .prefooter {
        display: none;
    }

    Also, as a rule, Home and Shop are 2 different pages. On your site, it is 1 page – http://prntscr.com/n00exo If you want to have a separate Home page, create a new page and select it as Homepage in Settings > Reading.

    Regards

    Avatar: Vikfom
    Vikfom
    Participant
    March 19, 2019 at 15:35

    where to paste this code?

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 19, 2019 at 15:37

    Theme Options > Custom CSS > Global Custom CSS.

    Regards

  • 1 2
    Viewing 20 results - 1 through 20 (of 28 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.