Return to previous page

Products Line Design - by DaphneO - on WordPress WooCommerce support

This topic has 12 replies, 4 voices, and was last updated 8 years, 1 months ago ago by Jack Richardson

DaphneO

Participant

March 14, 2016 at 13:14

Hello,

thank you for your previous answer,
can you please tell me how to design the titles and buttons under the Product images in the front page?

Right now the title is the pictures categories, it is aligned left and the buttons are transparent.

How can I:
1. align it in the center
2. make the buttons red
3. change the titles

Thank you very much

#117313 Copied Theme version: Legenda

11 Answers
Robert Hall

Support staff

March 14, 2016 at 14:04
Hello,

Please add the following code in custom.css file
```
.slide-item .product .products-page-cats,
.slide-item .product .add-to-container{
text-align:center;
}
```
```
.slide-item .button{
    border: 1px solid red;
    background-color: red;
}
```
Regards,
Robert Hall
#117319 Copied
DaphneO

Participant

March 14, 2016 at 16:17

Thank you very much,
can you advice me how to change the title under each products?

if it is by code maybe right down one of them so I can try to understand and do it myself for the other ones?

thank you

#117353 Copied

Robert Hall

Support staff

March 14, 2016 at 16:28

As I see you’ve disabled the titles for products. Please select Show product name in Dashboard->Theme Options->Products Page Layout. Then you can change products name in Dashboard->Products.

Regards,
Robert Hall

#117355 Copied

DaphneO

Participant

March 14, 2016 at 16:46

Thank you very much,

sorry to bother you again but I did what you say, the titles are there now but once again, its align to the left,
how can I align it to the center?

can you give me the code to add in the custom.css file?

thank you

#117361 Copied
Robert Hall

Support staff

March 14, 2016 at 16:53
Hello,

Please use this code in custom.css
```
.slide-item .product .product-name, .products-grid .product .product-name{
text-align:center;
}
```
Regards,
Robert Hall
#117363 Copied
DaphneO

Participant

March 15, 2016 at 08:37

Thank you very much,

one last question about the subject would be,

I have 4 “products” in that line each product have a read more button leading to its product page, I would like the button to lead to another page of the website

How can I control the “links” related to each od those buttons?

thank you very much

#117448 Copied

Eva Kemp

Support staff

March 15, 2016 at 09:10

Hello,

Sorry, but there is no such option, it’s related to Woocommerce configuration and may contact them regarding your query. Also refer to this article https://docs.woothemes.com/document/set-a-custom-add-to-cart-url-to-redirect-to/ .

Regards,
Eva Kemp.

#117460 Copied

DaphneO

Participant

March 15, 2016 at 16:20

Hello again,
thank you very much for your quick answer as usual,

as it isn’t possible i tried a new method that looks pretty good and I created a new separation line and under it another line with 4 products, under each product one text for the title and a button.
It looks pretty good but of course i have a few questions because I want it to look like in the theme.

1. for the buttons to look like in the theme, I used a size mini, style outline, color classic black but it looks very different than the buttons used above, can you tell me why? obviously the frame of the button in the demo is much thiner and gray and the font is different, can you tell me how to change the button for it to look similar?

2. the text in the title. I would like it to look the same as in the line above, like a title which is bigger and the font is different, which code do I use for it in the “text element”

Thank you very much for your patience.

#117518 Copied Theme version: Legenda
Eva Kemp

Support staff

March 15, 2016 at 17:23
Hello,

1. Please add this code in custom.css file:
```
.vc_btn3.vc_btn3-color-black.vc_btn3-style-outline {
    color: #000000 !important;
    border: 1px solid #dddddd !important;
    font-size: 11px !important;
    font-family: Georgia;
    text-transform: uppercase;
}
```
2. You can use this style in Text element, for example:
<p style="text-align: center; font-size: 16px; font-family: Georgia, Arial; text-transform: uppercase; font-weight: normal;">Back Pro</p>

Regards,
Eva Kemp.
#117529 Copied
DaphneO

Participant

March 15, 2016 at 18:13

Thank you very much, it looks almost perfect!
last questions on the topic – I hope 🙂 :

1. How can I make a smaller gaps between the products, the titles and the buttons so it looks like the product line under it?

2. Finally, I add “Single Image Galleries” for the product display, is there a way to erase the big arrows on the side of it?

Again, thanks a lot

#117540 Copied Theme version: Legenda
Jack Richardson

Support staff

March 15, 2016 at 18:29
Hello,

1. Please use this code in custom.css:
```
.wpb_gallery_slides.flexslider {
    margin-bottom: 0px !important;
}
.home .wpb_text_column.wpb_content_element {
    margin-bottom: 15px !important;
}
```
2. To remove arrows add this code in custom.css file:
```
.wpb_gallery_slides .flex-direction-nav {
    display: none;
}
```
Best regards,
Jack Richardson.
#117543 Copied
Viewing 12 results - 1 through 12 (of 12 total)