shop page

This topic has 20 replies, 2 voices, and was last updated 3 years, 9 months ago by Aizaz Imtiaz Awan.

Viewing 21 posts - 1 through 21 (of 21 total)

Author

Posts
February 16, 2021 at 10:51 am #266944

moh962018
Participant

hello
thanks for quick responding

Your team instructed me to add this code in order to change the shape of the page

.product-grid-item tr.woocommerce-product-attributes-item {
border-bottom: 1px solid #E6E6E6;
}

.product-grid-item {
box-shadow: 0 0 10px rgb(0 0 0 / 15%);
border-radius: 20px;
margin-left: 22px;
max-width: 28%;
}

how ever i want this change to work only in the shop pages or category page only < but not work at the main menu page how i can make that? as it make some problem to some products at the main menu

2- i want to make the price bellow the description not above how i can make that? and leave some space between the desctipn and price

ylasouq.com
this is my website

Attachments:
You must be logged in to view attached files.

February 16, 2021 at 12:34 pm #266989
Aizaz Imtiaz Awan
Keymaster
Hello,

1) To make the CSS to work only on the shop and the categories pages. Please replace the previous Custom CSS with the following.
```
.woodmart-archive-shop .product-grid-item tr.woocommerce-product-attributes-item {
border-bottom: 1px solid #E6E6E6;
}

.woodmart-archive-shop .product-grid-item {
box-shadow: 0 0 10px rgb(0 0 0 / 15%);
border-radius: 20px;
margin-left: 22px;
max-width: 28%;
} 
```
2) Sorry but there is no option available in Theme Settings available for that.

Regards.
Xtemos Studios.
February 16, 2021 at 1:52 pm #267029

moh962018
Participant

sorry but still now working for all products at the main page

Attachments:
You must be logged in to view attached files.

February 17, 2021 at 7:07 am #267201
Aizaz Imtiaz Awan
Keymaster
Hello,

I saw the screenshot you attached. Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.
```
.home .product-grid-item {
    box-shadow: none;
}
```
Regards.
Xtemos Studios.
February 17, 2021 at 10:57 am #267279

moh962018
Participant

sorry still not working

can you enter to my website and solve the proplem?

2- i want to fill this free space with product and not leave it plank how i can do that?

Attachments:
You must be logged in to view attached files.

February 17, 2021 at 11:00 am #267283

moh962018
Participant

hello

February 17, 2021 at 1:13 pm #267333

Aizaz Imtiaz Awan
Keymaster

Hello,

I have tried to login to your website but displayed the following error.

Screenshot for Clarification: https://prnt.sc/zuqks9

Please allow me to access the site to let me assist you further.

Regards.
Xtemos Studios.

February 17, 2021 at 1:29 pm #267343

moh962018
Participant

i have attached the url in the previes comment !! please copy and past it

you have entered the wrong url

February 18, 2021 at 6:52 am #267514
Aizaz Imtiaz Awan
Keymaster
Hello,

I have visited your website and the CSS is working and the style is not affecting the homepage products.

Screenshot for Clarification: https://ibb.co/SPt0qCf

2) The products on the shop page are set to be displayed inside the container and they are displayed fine as they should be on your website.

Therefore to make the shop page full width try adding the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.
```
.post-type-archive-product .container { 
width: 95%; max-width: 95%; 
}
```
Best Regards.
February 18, 2021 at 9:35 pm #267701

moh962018
Participant

Hello
thank you for helping me

for the following code :
.post-type-archive-product .container {
width: 95%; max-width: 95%;
}

i have put this command but still there is still space there i want ( space2) to be fitted
it will make all the page including the filter to be filled < how ever i want just the products to be moved so the product will be in different container ,,,

2- as shown in screen shot i want to increase ( space 1 ) how i can do that?

Attachments:
You must be logged in to view attached files.

February 18, 2021 at 10:01 pm #267705

moh962018
Participant

3- after adding this code :

.product-grid-item {
box-shadow: 0 0 5px rgb(0 0 0 / 15%);
}

.home .product-grid-item {
box-shadow: none;
}

.labels-rounded .product-label { /* حجم الدائرة */
min-height: 40px;
min-width: 40px;
}

.woodmart-hover-base .fade-in-block { /*هذه لاجل انه يظهر مختصر المنتج تحت المنتج */
position: static;
visibility: visible;
opacity: 1;
}

.woodmart-hover-base .content-product-imagin {
height: 510px;
}

.woodmart-archive-shop .product-grid-item tr.woocommerce-product-attributes-item {
border-bottom: 1px solid #E6E6E6;
}

.woodmart-archive-shop .product-grid-item {
box-shadow: 0 0 10px rgb(0 0 0 / 15%);
border-radius: 20px;
margin-left: 20px;
max-width: 20%;
}

.post-type-archive-product .container {
width: 95%; max-width: 95%;
}

the code only working in the shop page ! how ever its not working at the category page ?? why?
if you go to the category pages from the main page > then it will not work

February 18, 2021 at 11:23 pm #267731

moh962018
Participant

4- i want to flip the counter to be days — hours .. minute .. seconds

February 19, 2021 at 7:42 am #267775

Aizaz Imtiaz Awan
Keymaster

Hello,

I saw the screenshots you attached and visited your website.

1) Actually space 2 you mentioned is due to the margin value that you require to add some space between the product grids.

Space is actually of one product grid item which space is used to add a margin between the grid items. And it is not possible to fill out space by keeping the margin that you need.

I hope my explanation is clear enough for you to understand the work.

2) I have checked your website And the code is working on all the categories and shop pages. Please clear cache and check back.

3) You can read our detailed documentation in the following link:
https://xtemos.com/docs/woodmart/faq-guides/display-countdown-timer-product/

Best Regards.

February 19, 2021 at 9:11 am #267789

moh962018
Participant

1- i didnt understand you please give me some solution i go with , i want to make some space (1)

2- i want space (2) to be filled with product without change the page width! i want it to stay the same just the product container width be filled!

3- its not working on all the categories and shop pages!! i have check it again dont enter the shop page, Go to the catagory page from the home page and do not enter the catorgy from the shop page and you will find that the problem persists.

4- i want to flip the counter to be days — hours .. minute .. seconds

February 19, 2021 at 11:25 am #267825

Aizaz Imtiaz Awan
Keymaster

Hello,

1 &2) Sorry but it is not possible to add space as you mentioned and fill the product as you required. Because the space is created due to the margin value that is added to add space between the girds.

Therefore if you need to fill products to the empty space then you need to remove the margin value that is added to add space between the product grids.

3) Please provide me with the steps to reproduce the issue to check it myself and help you out accordingly.

4) Please elaborate with the help of some relevant screenshots of the specific area that you require to check it myself and help you out accordingly.

Best Regards.

February 19, 2021 at 4:04 pm #267893

moh962018
Participant

1&2 what is the relation between the margin value and the spaces!? and if i want to remove that margin value ? does i can fill all the spaces?? ( Impossible there was no way to do what I needed! But please clarify, is it not in your authority to amend this or is it not possible?(

3-just enter the url then click at the category drop down menu from at the top right of the main page then you will see that its diffrent from the shop page!!
http://www..ylasouq.com

4- you can see the screen shot i provide you with!! i just want to flip the counter
its now second ,, minute ,, hours ,, days
i want it to be days,, hours ,minute ,seconds

Attachments:
You must be logged in to view attached files.

February 20, 2021 at 6:41 am #268001

Aizaz Imtiaz Awan
Keymaster

Hello,

1) Yes you need to remove the margins and the max-width value that is assigned to the products then they will fill the container by removing the space.

2) Please provide the admin panel login details of the website to check it myself and help you out accordingly.

3) Sorry but there is no option in Theme Settings available to flip hours days as you mentioned.

Best Regards.

February 20, 2021 at 3:38 pm #268060

moh962018
Participant

Alredy provided in the same post
Please give some time before asking!!

February 22, 2021 at 6:57 am #268280
Aizaz Imtiaz Awan
Keymaster
Hello,

Please try adding the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.
```
.woodmart-archive-shop .container {
    max-width: 95%;
    width: 95%;
}
```
Regards.
Xtemos Studios.
February 22, 2021 at 9:22 am #268312

moh962018
Participant

its not working!!
this for the conainter margin!

February 22, 2021 at 10:52 am #268339

Aizaz Imtiaz Awan
Keymaster

Hello,

Sorry but I am unable to understand your issue because the code you mentioned in the previous reply is working. Only the CSS to increase the width of the container wasn’t working. That’s why I provided you with the CSS.

Please elaborate how it’s not working to check it myself and help you out accordingly.

Regards.
Xtemos Studios.
Author

Posts