[HidariniArt]

Hi,

Can you help me with layout questions on Woocommerce pages that we have installed in the Theme Photographer?

Our website sells printed and framed photographs in different sizes. Let me know if you need access to the dashboard to be able to help.

1. On the shop page, we have selected to display only categories. However, the front picture of each category is surrounded by a thick outline. How can we remove/change this outline?

2. On each product page, how can we change the font of the product name?

3. As each photograph is sold in different sizes, there is a price range for each one. So, on each product page, the price range is also displayed. We want to remove this. Where can we do it?

4. Again, on each product page, the user can select the size in which he wants to order the photo. There is a drop down menu that allows to choose the size. However the order in which the sizes are displayed doesn’t make sense. How can we change it?

Many thanks!
Ronak

[serkan]

Hi Ronak,
Could you provide me related url for each question, so i can give you custom css code?
Thanks

[HidariniArt]

Hi Serkan,

Do you want URL of published site? If so, here you go. If something else, please let me know too. Thanks a lot!

1. On the shop page, we have selected to display only categories. However, the front picture of each category is surrounded by a thick outline. How can we remove/change this outline? https://hidariniart.com/shop/

2. On each product page, how can we change the font of the product name? Here is an example of a product page: https://hidariniart.com/product/1001/

3. As each photograph is sold in different sizes, there is a price range for each one. So, on each product page, the price range is also displayed. We want to remove this. Where can we do it? Same page as above, the price range displayed below the photograph name.

4. Again, on each product page, the user can select the size in which he wants to order the photo. There is a drop down menu that allows to choose the size. However the order in which the sizes are displayed doesn’t make sense. How can we change it? Same page as 2. open drop down menu of sizes.

[serkan]

Hi,
1) You can use this custom css code;

.product-category img { border: none; }

2) Once you have uploaded the font, you need to load the font in your theme’s stylesheet using CSS3 @font-face rule like this:

@font-face {
    font-family: Isabella; 
    src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Isabella.ttf); 
    font-weight: normal; 
}

Don’t forget to replace the font-family and URL with your own.
After that you can use that font anywhere in your theme’s stylesheet like this:

.product_title { font-family: "Isabella", Arial, sans-serif; }

3) You can use this custom css code;

.woocommerce div.product .summary p.price { display: none; }

4) I could not understand your last question. Could you explain it to me more?
Thanks

[HidariniArt]

Hi Serkan,

Thanks a lot, it all works fine! A few more questions for you, still on the product page: https://hidariniart.com/product/1001/

5. As I have removed the price range under the photograph title, There is no space between the name and the short description. How can I add a space there?

6. I also wanted to change the font size in the short and long description of each product page. I found an old post where you gave the CSS for both. The one for the long description at the bottom works, but not the one for the short description:
.woocommerce-product-details__short-description p {font-size: 15px; }

I tried different sizes of course. Any thoughts?

7. How do I activate Woocommerce? It still said TEST MODE ENABLED even when I log from another device.

Thanks again,
Ronak

[HidariniArt]

Hi again Serkan,

In additional to my above questions 5, 6 and 7, here are a couple of additional questions.

8. For page https://hidariniart.com/product/1001/ could you provide the CSS to increase:
– police of attributes Dimensions and Border
– and police of description displayed when the user has selected a Dimension and Border?

9. On the same page as above, when you scroll down and get to related products, the price range is displayed under each small photograph. How can we remove it?

10. Also when you open a category, for example https://hidariniart.com/product-category/land-of-ice-and-fire/ the price range is displayed under each small photograph. We would like to remove it.

Many thanks!
Ronak

[serkan]

Hi Ronak,
5) You can use this custom css code;

.woocommerce div.product .product_title { margin-bottom: 1em; }

6) Try to use this custom css code;

.woocommerce .summary {  font-size: 15px; }

7) If you need further assitance on woocommerce, I recommend you to contact their support team; https://woocommerce.com/contact-us/
8) I am little bit confused. Are we talking about important note section?
If it is yes, try to use this custom css code;

.woocommerce div.product .woocommerce-tabs .panel ul li:last-child ul li { font-size: 17px; }

9) You can use this custom css code;

.woocommerce ul.products li.product .price {
    display: none; }

10) The custom css code above will hide the price range as well.
Thanks

[HidariniArt]

Thanks a lot Serkan!

About my question 8, here is what I meant. Take this product page: https://hidariniart.com/product/1001/

– You have to choose the variations “Dimensions” and “White Border” before the price of the product is displayed.
– Once you have selected Dimensions and White Border, the price appears. Above this price is a short description.
– On this page, if you select Dimensions 105x70cm and White Border 8cm, the total price is 469.95 and the short text above this price reads: “Total work dimensions 121.8 x 86.8 cm”. This text is very small but quite important for the buyer. I want to increase its font size.

Many thanks!
Ronak

[HidariniArt]

Hi Serkan,

In addition to my above question 8. I have the 2 below ones also.

4. Coming back on this question 4. What I mean is, when you are on a product page, and you open the drop down menu from the variations “Dimensions”, it shows you the possible variations. For example, for this page https://hidariniart.com/product/1001/, it shows in this order:
-105×70
– 120×80
– 60×40
– 75×50
– 90×60

I see that the order is based on the first digit of the variations. However, we would like to be able to modify this order to follow the actual size of the photograph proposed. Like this:
– 60×40
– 75×50
– 90×60
-105×70
– 120×80

Is it possible?

11. On the general shop page https://hidariniart.com/shop/ next to each category name, there is the number of products available in it in brackets and highlighted. How can we remove this?

Many thanks!
Ronak

[serkan]

Hi Ronak,
You can use this custom css code;

.woocommerce div.product form.cart .woocommerce-variation-description p {  font-size: 14px; }

You can ask it to our woocommerce support forum. It is not possible by default to order it with the theme.
For your last question, you can use this cusotm css code;

.product-category h2 .count {  display: none; }

Thanks

[HidariniArt]

Thanks a lot Serkan all clear!

12. One last question, about this page: https://hidariniart.com/product/7011/

This is our only product that only offers 1 variation only. Unfortunately, when the user selects dimension and white border, the price doesn’t display.

We have also tried putting default values for the variation, but price still doesn’t display.

Any thoughts on why?

Thanks!

[HidariniArt]

Actually one more question:

13. About the Photowall homepage: is there any way to make the mosaic of pictures slightly lighter?

Thanks!!

[serkan]

Hi, I replied the related topic;
http://www.pixelwars.org/forums/topic/no-price-display-for-product-variation/
13. You can use this custom css code;

.home-wrap .ri-grid:after {  background: #464545; }

Thanks