Return to previous page

Single product page layout on mobile - by hemantparmar

This topic has 8 replies, 2 voices, and was last updated 7 years ago ago by Olga Barlow

hemantparmar

Participant

March 24, 2017 at 09:36

Hi,

My majority of customers access the website from mobile phone. From that perspective please guide me how do I achieve the following.

1. In current single product page layout when loaded on mobile, almost 50% of space goes in header and the breadcrumbs, please refer to single product page on my website given in private content. And when I scroll down the product Image takes up the entire screen. In case of product variations it becomes difficult to change the variation and see its effect on the product image. Product image should not occupy the full screen of mobile. On mobile screen it should display on the first load itself (without the need to scroll down) –
a. product title,
b. the product image with pagination bullets for product gallery images,
c. options(to select color and size) and price. This is important for product variations so that when a customer selects a variation the change of product image can be seen immediately without the need to scroll the page.
d. And on scrolling down add to card button and description should appear.

May be we can achieve this if the screen can be divided into two parts (4 columns for image, 2 columns for selecting options like size, color and to display price). This will help to display all this info without the need to scroll down.

3. In the reference link given in private content, when the Select Color or Size option is clicked it pops up the list with price and stock availability. Can we achieve that?

Awaiting your support.

best regards
hemant

Please, contact administrator
for this information.

#157771 Copied Theme version: 3.9 WooCommerce version: 2.6.14

7 Answers

hemantparmar

Participant

March 24, 2017 at 09:40

an update: I am using WooSwatches plug-in for variations

#157772 Copied

hemantparmar

Participant

March 24, 2017 at 21:07

HI,

Please refer to the link added in private content for viewing the single product page with actual number of variations created for one particular product.

1. The last column where product price and variations selection are listed. Can we reduce the top padding between the title”Product Price”
2. Can we reduce the width for product info and increase for Product Price column – as this will allow more number of variations to be visible within the product image height. At present the attribute title “color” and “size” are taking up vertical space which can be used to add one more column of color variations.
3. The additional information also appears below the product information(short description). Can we preferably remove this additional information from Product Information or disable the additional information tab?
4. How do I shorten the displayed description and add “Read more” to expand the remaining description.

rgds
hemant

Please, contact administrator
for this information.

#157885 Copied
Olga Barlow

Support staff

March 25, 2017 at 12:44
Hello,

If you plan to make any changes, please, install and activate XStore child theme and place all the changes there http://xstore.helpscoutdocs.com/article/32-child-theme

Add the following code in child theme style.css to decrease the height of the header and breadcrumbs and show bullets instead of the gallery images
```
@media only screen and (max-width: 991px){
.header-wrapper header .container-wrapper {padding: 15px 0;}
}
@media only screen and (max-width: 480px){
.global-header-xstore .page-heading {
    padding-top: 7em;
    padding-bottom: 2em;
}
.single-product .product-images {padding: 0px 40px;}
.single-product .main-images .owl-controls .owl-pagination {display: inline-block;}
.single-product .images .thumbnails {display: none;}
}
```
If you need any extra features like popup that will appear when you choose options you need additionally customize theme and this is not included in our support. We can help you only with minor CSS customization and provide information about theme options. If you need help with additional customization contact WPKraken team

1) Use the following code to remove marging below the Product price title
.single-product-booking .product-side-information-inner .product-price-title {margin-bottom: 0px;}

Use the following code to reduce the padding above the product price title
.single-product-booking .product-side-information-inner > div {padding: 30px 30px;}

2) Use the following code
```
.single-product-booking .product-information {width: 30%;}
.single-product-booking .product-side-information {width: 36%;}
```
3) Use WC snippets to remove the Additional Information tab https://docs.woocommerce.com/document/editing-product-data-tabs/

or use the following code to remove additional info below the short description
.product-information .product-attributes {display: none;}

4) There is no such option in our theme. It’s possible only by additional customization.

Regards
#157906 Copied
hemantparmar

Participant

March 25, 2017 at 14:32

Thank you so much Olga for your detailed reply.

I need one more help. This is the first time i would be installing child theme. My website is live at the moment. Kindly guide me the best way to install child theme.

I just checked one of the child theme folder which is xstore-child. It has three files functions.php, screenshot.png and style.css(which is blank now). So I should add the above code in that file, and add that xstore-child folder to my website.

Please give me steps to upload xstore-child theme. Do I upload the zip file?

Thanks you once again for your patience and support.

kind regards
hemant

#157909 Copied

hemantparmar

Participant

March 25, 2017 at 23:00

Hi Olga,

I just tried the product layout type – Centre, in the product edit section – 8theme product options. In this layout the spacing of price is perfect for my requirement(see link in private content). However, the product image and product information is lowered. I think it is vertically centered according to the product side information height. If we can top align the three – product image, product information and product side information – in this layout then my problem is solved about the spacing above and below price title. Also in this layout the attribute info is not duplicated below short description.

Of Course I will still use the header, breadcrumbs and product gallery custom css to manage the product space and side info within one screen of mobile device.

rgds
hemant

Please, contact administrator
for this information.

#157914 Copied

hemantparmar

Participant

March 27, 2017 at 11:28

In the product layout type – Centre, How to ensure that on mobile phones, on single product page, the product image height takes up only 60% of the mobile screen height? This will allow the remaining info – price, color selection and size to come up on the same screen as product image. So when a customer clicks on color selector they will be able to see the change in product image.

#157971 Copied
Olga Barlow

Support staff

March 29, 2017 at 15:16
Hello,

To install child theme go to Appearance > Themes and install it like any WP theme.
All the custom CSS code add in child theme style.css

To align top the options, image and description add the following code
```
.single-product-center .product-content > .row {
    -webkit-box-align: top;
    -webkit-align-items: top;
    -ms-flex-align: center;
    align-items: top;
}
```
If you want to redesign mobile layout of the single product page you can play with CSS styles in case you have CSS skills.
Unfortunately, additional customization is not included in our support. I can help you with minor changes but not with individual customization of the layouts.

Regards
#158224 Copied
Tagged: layout, mobile, single product, woocommerce, wordpress
Viewing 8 results - 1 through 8 (of 8 total)