Return to previous page

Product Category Page/ Shop Page - by Vikfom

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

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.

#208959 Copied Theme version: Version: 1.0 WooCommerce version: Version 3.5.4

27 Answers
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://www.8theme.com/documentation/xstore/woocommerce/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
#208961 Copied
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.

#209278 Copied

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

#209279 Copied

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.

#209304 Copied

Rose Tyler

Support staff

February 15, 2019 at 13:59

Please see screenshots – http://prntscr.com/mlhtiv > http://prntscr.com/mlhtqs
http://prntscr.com/mlhtuw > http://prntscr.com/mlhu3v

Regards

#209308 Copied

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.

#209456 Copied
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
#209457 Copied
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.

#209466 Copied
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
#209468 Copied
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.

#209507 Copied

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

#209512 Copied

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.

#210927 Copied

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

#210944 Copied

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!

#211001 Copied

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

#211008 Copied

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.

#211154 Copied
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
#211155 Copied
Vikfom

Participant

March 19, 2019 at 15:35

where to paste this code?

#211157 Copied

Rose Tyler

Support staff

March 19, 2019 at 15:37

Theme Options > Custom CSS > Global Custom CSS.

Regards

#211158 Copied

Vikfom

Participant

April 8, 2019 at 12:20

Hello Rose/Olga!

I have few more questions:
1) How to put product attribute on the shop page or product category page below the product? For example Size. But I will have only one size (without other options). I just want to show the product size to customers.
2) How to change out of stock label? I want to change it for “Sold” and make transparent round icon. How to make it?

Thank you in advance.

Please contact administrator
for this information.

#212143 Copied

Rose Tyler

Support staff

April 8, 2019 at 12:46

Hello,

1) Try to use “Shop Page Banner content” area (Theme Options > Shop >
Shop page Layout) or “After the products” area (Appearance > Widgets).
Also, every Product category has “Description” and “Description after content” areas.
You can add a content/static block into these areas depends on your needs.
2) Install Loco translate plugin, change the text for English and disable Loco translate.
Use CSS selector of the stock label to add your custom CSS. You can add custom CSS either in child theme’s style.css or Theme Options > Custom CSS.
I do not see “out of stock” items on your site. If you need help with the custom CSS code, provide me link to page, where I will be able to see such product.

Regards

#212145 Copied

Vikfom

Participant

April 8, 2019 at 12:52

I made some products out of stock.
But I want to change “out of stock” to “Sold”

Please send me the css code.

#212146 Copied
Rose Tyler

Support staff

April 8, 2019 at 12:59
```
.content-product .stock {
    border-radius: 100px;
    padding: 20px 15px;
    color:  black;
}
```
Regards
#212148 Copied
Vikfom

Participant

April 8, 2019 at 13:06

Thank you for the code.
I want to ask one more thing about attributes.

How to put attribute Size and color above the product name on the shop page/product category page like here https://xstore.8theme.com/demos/2/marseille01/shop/?

#212153 Copied

Rose Tyler

Support staff

April 8, 2019 at 13:08

Please watch this video – https://youtu.be/XO-PDvhPypc
“Swatch position” you can select in Theme Options > Shop elements > Variation swatches.

Regards

#212154 Copied

Vikfom

Participant

April 15, 2019 at 13:33

Hello Rose/Olga!

I have one question about checkout page:

Can I install following field:
How did you find us?*
Google
Instagram
Facebook
And customers should put a check mark before one of the words in a square.

Is it possible?

Thank you in advance.

Please contact administrator
for this information.

#212432 Copied

Rose Tyler

Support staff

April 15, 2019 at 13:48

Hello,

Please submit new topics for new questions.
You can maybe find a plugin that can provide such functionality.
Note that we don’t give guarantee for full theme compatibility with all 3rd party plugins.

Regards

#212435 Copied
Viewing 28 results - 1 through 28 (of 28 total)