Return to previous page

Single Product Page/Shop Page/Category Page/Cart Page/

This topic has 19 replies, 3 voices, and was last updated 6 years, 8 months ago ago by Olga Barlow

Gry4you

Participant

January 4, 2018 at 14:05

Hi,,
I would like to customize my Single Product Page and Shop Page as it allows this plugins:
https://codecanyon.net/item/woocomposer-page-builder-for-woocommerce/19283472
https://codecanyon.net/item/single-product-page-builder-for-woocommerce/19557266
https://codecanyon.net/item/woocommerce-page-builder/15534462

I would like to add:
– frames,
– sections,
– video,
– price,
– title,
– add to cart etc.

Video you will find here:
https://www.youtube.com/watch?v=HIJ0-u67Aeo&list=PL_HbKbJsShUhl9s6GyBPRvZ6glDBpq6k4

I coudn’t find Single Product Page or Category Page!

How can I customize page without plugins?

Regards

#181183 Copied Theme version: 4.15 WooCommerce version: 3.2.5

18 Answers

Olga Barlow

Support staff

January 4, 2018 at 16:35

Hello,

All the available layout settings for the Shop and Single product page you can find in Theme Options > E-Commerce. We don’t have product or shop page builder at present. But we plan such feature for future updates.

Regards

#181190 Copied

Gry4you

Participant

January 5, 2018 at 15:37

Hi Olga,

1. Ok, if you don’t have page builder I would like to add frame to product page on page layout, like here:
https://www.8theme.com/demo/xstore/bike/product/class-aliquet-parturien/

Or box page layout, like here:
https://www.8theme.com/demo/xstore/christmas/product/ball-christmas-ornaments/

2. How to change “add to cart” button, like here:
https://gry4you.com/wp-content/uploads/2018/01/Cart1.jpg
https://gry4you.com/wp-content/uploads/2018/01/Cart2.jpg
https://gry4you.com/wp-content/uploads/2018/01/Cart3.jpg

My “add to cart” button looks like:
https://gry4you.com/wp-content/uploads/2018/01/Gry4_Cart_Button_1.jpg

3. How to change page layout columns like here:
https://www.8theme.com/demo/xstore/makeup/product/isadora/

This is my view:
https://gry4you.com/wp-content/uploads/2018/01/Gry4_Page_Layout_1.jpg

Regards
D

#181235 Copied Theme version: 4.15 WooCommerce version: 3.2.5

Rose Tyler

Support staff

January 5, 2018 at 16:13

Hello,

1. You may do it via Theme Options, for example, please see screenshots of single product settings from our demos – christmas (http://prntscr.com/hwg1sw http://prntscr.com/hwg1wc), bike (http://prntscr.com/hwg294 http://prntscr.com/hwg2da).
Let us know if you need any further assistance.
2. We have 3 types of buttons on our site – light (for example http://prntscr.com/hdcwhy), dark (for example http://prntscr.com/hdcwxi), active (for example http://prntscr.com/hdcx3r).
You may use Theme Options > Styling -> Content > Customize buttons to change styles of your buttons http://prntscr.com/hdcxly.

On demo sites, we use custom css code, so select type of button that you want to have and we will provide you css code.

3. Please see screenshots of the demo site settings https://prnt.sc/hwg488 https://prnt.sc/hwg53t

Feel free to ask if you have any questions.

Regards

#181241 Copied

Gry4you

Participant

January 8, 2018 at 11:48

Hi Rose,

That’s not what I meant!

1. I would like to add frame to all product site like this:
https://gry4you.com/wp-content/uploads/2018/01/Gry4you_Frame_1.jpg

3. I would like to change content position!!!

This my content position on single product page:
https://gry4you.com/wp-content/uploads/2018/01/Gry4you_Content_Position_1.jpg

I want to change like this (pictures – centre/price and add to cart button on right and product description on left), like this:
https://gry4you.com/wp-content/uploads/2018/01/Gry4you_Content_Position_2.jpg

I’ve made change on Adobe Photoshop for example:)

PS. You have the same content position here:
https://www.8theme.com/demo/xstore/makeup/product/isadora/

Regards
D.

#181311 Copied Theme version: 4.15 WooCommerce version: 3.2.5

Rose Tyler

Support staff

January 9, 2018 at 13:49

Hello,

Could you please provide temporary wp-admin access in Private Content?

Regards

#181418 Copied

Gry4you

Participant

January 10, 2018 at 11:44

Hi Rose,

It’s impossible for security reason.

I always received a css code from you, which I added.

Could you send css code?

Regards
D.

#181494 Copied Theme version: 4.15 WooCommerce version: 3.2.5

Rose Tyler

Support staff

January 10, 2018 at 13:45

Hello,

On this our demo https://www.8theme.com/demo/xstore/makeup/product/isadora/ we use this layout http://prntscr.com/hyhr2b
If you can’t provide wp-admin access, please temporarily disable maintenance mode, so we could inspect site code and give you an example of css code to achieve the desired result.

Regards

#181507 Copied

Gry4you

Participant

January 10, 2018 at 15:15

Hi Rose,

Maintenance mode is disable.

#181519 Copied Theme version: 4.15 WooCommerce version: 3.2.5
Rose Tyler

Support staff

January 10, 2018 at 15:35
Thanks.

1. I would like to add frame to all product site like this:
https://gry4you.com/wp-content/uploads/2018/01/Gry4you_Frame_1.jpg

– http://prntscr.com/hyjev5
```
.single-product .product-content .row > div {
    border: 1px solid #e6e6e6;
    margin: 10px;
    padding: 15px;
}
```
I want to change like this (pictures – centre/price and add to cart button on right and product description on left), like this:
https://gry4you.com/wp-content/uploads/2018/01/Gry4you_Content_Position_2.jpg

– https://prnt.sc/hyhr2b

Let us know if you need any further assistance.

Regards
#181522 Copied
Gry4you

Participant

January 10, 2018 at 17:23

Hi Rose,

1. New frames looks cool:
https://gry4you.com/wp-content/uploads/2018/01/Gry4you_Page_Frame_ver1.jpg
but, if I change the page layout settings like this:
https://gry4you.com/wp-content/uploads/2018/01/Gry4you_Single_Page_Layout_ver1.jpg

2. My Single Product Page looks ugly, very ugly, look:
https://gry4you.com/wp-content/uploads/2018/01/Gry4you_Single_Page_Layout_ver2.jpg
Everything is soo big and unadjusted to dimensions.

This settings looks cool:
https://gry4you.com/wp-content/uploads/2018/01/Gry4you_Single_Page_Layout_ver3.jpg
but I would like to change position like here:
https://gry4you.com/wp-content/uploads/2018/01/Gry4you_Content_Position_2.jpg

I have a single product page now:
https://gry4you.com/wp-content/uploads/2018/01/Gry4you_Single_Page_Layout_ver3.jpg

Price should be on the right/Pictures and video in the middle/Description on the left!

3. When I use this settings:
https://gry4you.com/wp-content/uploads/2018/01/Gry4you_Single_Page_Layout_ver3.jpg

I have beautiful grey background (price position). How to add to all position on single product page, like this:
https://gry4you.com/wp-content/uploads/2018/01/Gry4you_Single_Page_Layout_ver5.jpg

Regards
D.

#181529 Copied Theme version: 4.15 WooCommerce version: 3.2.5

Olga Barlow

Support staff

January 11, 2018 at 09:45

Hello,

I’m confused because first, you tell that you want the image in the middle and then you told me that this position is what you want https://gry4you.com/wp-content/uploads/2018/01/Gry4you_Page_Frame_ver1.jpg

Could you, please, provide me final mockup how the single product page should be? Provide us the design of the single product page that you want to have and we’ll point you t the right direction and provide correct custom code.

Also, it would be better if you could create the temporary account for our support with limited permissions to Dashboard settings, we just need access to Theme Options in your case and that’s all. It will speed up the process.

Regards

#181566 Copied

Gry4you

Participant

January 11, 2018 at 11:43

Dear Olga,

1. This is my original view from single product page on https://gry4you.com
https://gry4you.com/wp-content/uploads/2018/01/Gry4you_Page_Frame_ver1.jpg

2. I used these single product page settings:
https://gry4you.com/wp-content/uploads/2018/01/Gry4you_Single_Page_Layout_ver3.jpg

3. I would like to change single product page layout where:
– “Price” should be on the right
– “Pictures” and video in the middle
– “Description” on the left!

To illustrate what I want I used Adobe Photoshop to create single page (it is only example – you know what I mean!!!). “Single Product Page” should be look like this:
https://gry4you.com/wp-content/uploads/2018/01/Gry4you_Content_Position_2.jpg
(It is only example which I created on Adobe Photoshop to illustrate you how should be look single product page)

4. In the other hand I would like to add to all frames a grey background which occurs in the price box:
https://gry4you.com/wp-content/uploads/2018/01/Gry4you_Single_Page_Layout_ver5.jpg
(It is only example which I created on Adobe Photoshop to illustrate you how should be look single product page)

PS. I disable “Maintenance mode”!

Regards
D.

#181590 Copied Theme version: 4.15 WooCommerce version: 3.2.5
Olga Barlow

Support staff

January 11, 2018 at 16:47
Hello,

Ok, now everything is clear I hope.
Remove the following custom code
```
.single-product .product-content .row>div {
    border: 1px solid #e6e6e6;
    margin: 10px;
    padding: 15px;
}
```
And add the next one instead
```
.single-product .product-content .row>div {
    border: 1px solid #e6e6e6;
}
.single-product-booking .product-side-information {order: 3;}
.single-product .product-content .product-images {order: 2;}
.single-product .product-content .product-images,
.single-product-booking .product-side-information,
.product-fixed-content .product-information,
.left-bar .tab-content, .left-bar .left-titles li.active {
        background-color: #fafafa;
}
.single-product-booking .product-side-information-inner>div {
    padding: 50px 0;
}
@media screen and (min-width: 1200px){
.single-product .product-content .product-images,
.single-product-booking .product-side-information,
.product-fixed-content .product-information {
	width:33.333%
}
.single-product .product-content .row>div {
    margin: 10px;
    padding: 15px;
}
}
@media only screen and (max-width: 992px){
.single-product-booking .product-side-information, .product-fixed-content .product-information {
    width: 100%;
}
}
```
Regards
#181639 Copied
Gry4you

Participant

January 11, 2018 at 17:02

Wow, wow and one more time WOW.

You are amazing. No it looks super cool!

Thank you very much Olga.

Regards
D.

#181642 Copied Theme version: 4.15 WooCommerce version: 3.2.5

Olga Barlow

Support staff

January 11, 2018 at 17:18

You are welcome!

Regards

#181646 Copied

Gry4you

Participant

February 28, 2018 at 09:31

Hi Olga,

You helped me change the look of a single product page two weeks ago.
I don’t t know what happened, but suddenly the site has changed and it looks ugly. The upper columns are wider than the description and besides they stick together and there is no margin between them.

https://gry4you.com/wp-content/uploads/2018/02/single-product-page_1.jpg

I added a code that I received from you two weeks ago, but today is something wrong:

.single-product .product-content .row>div {
border: 1px solid #e6e6e6;
}
.single-product-booking .product-side-information {order: 3;}
.single-product .product-content .product-images {order: 2;}
.single-product .product-content .product-images,
.single-product-booking .product-side-information,
.product-fixed-content .product-information,
.left-bar .tab-content, .left-bar .left-titles li.active {
background-color: #fafafa;
}
.single-product-booking .product-side-information-inner>div {
padding: 50px 0;
}
@media screen and (min-width: 1200px){
.single-product .product-content .product-images,
.single-product-booking .product-side-information,
.product-fixed-content .product-information {
width:33.333%
}
.single-product .product-content .row>div {
margin: 10px;
padding: 15px;
}
}
@media only screen and (max-width: 992px){
.single-product-booking .product-side-information, .product-fixed-content .product-information {
width: 100%;
}
}

Single product page should have margin between colum 1, 2 and 3 and the same width size like here:
https://gry4you.com/wp-content/uploads/2018/02/single-product-page_2.jpg

PS. More info you will find in a Private Content.

Regards
Damian

Please, contact administrator
for this information.

#186612 Copied Theme version: 4.20 WooCommerce version: 3.3.3

Gry4you

Participant

March 1, 2018 at 10:03

Hi Olga,

Are you there?

#186784 Copied Theme version: 4.20 WooCommerce version: 3

Olga Barlow

Support staff

March 2, 2018 at 18:51

Hello,

Can you, please, disable cache plugin if you are still developing the project? You’ll be able to enable it once you finish. Till this happened cache plugin only create difficulties with editing CSS styles.

Regards

#187014 Copied
Tagged: cart page, category page, online shopping, shop page, single-product page, themes, woocommerce, wordpress
Viewing 19 results - 1 through 19 (of 19 total)