Home › Forums › WoodMart support forum › Pre build product page layout

Pre build product page layout

Viewing 24 posts - 1 through 24 (of 24 total)
  • Author
    Posts
  • January 7, 2021 at 3:10 pm #256493

    wphone
    Participant

    Hi looking at some examples of page layout I came across this product page
    but I did not find the corresponding layout, let’s say that I was interested in creating the part highlighted in red as I created similar attributes but they are then displayed in the tabs, while I would like to have the same (more or less) layout with the attributes instead of the description .
    Sorry for the question (and my google English), which may be stupid, but is there already a similar product page of yours? Thanks

    Attachments:
    You must be logged in to view attached files.
    January 7, 2021 at 9:40 pm #256578

    Elise Noromit
    Member

    Hello,

    1. Enable showing the attributes on the product page. https://prnt.sc/so0wvn

    2. Enable “Show attributes table after short description” in the Theme Settings > Product page > Hide/show elements.

    3. Set “Additional information” for the Hover content in the Theme Settings > Shop page > Product Styles and

    4. Set the Show summary on hover for Hover on product

    Best Regards

    January 8, 2021 at 2:05 pm #256807

    wphone
    Participant

    wow, perfect!
    Great & fast assistance for great theme!!!!

    January 8, 2021 at 2:48 pm #256813

    wphone
    Participant

    But is it possible to insert icons before each item? like attachment

    Attachments:
    You must be logged in to view attached files.
    January 8, 2021 at 9:40 pm #256902

    Elise Noromit
    Member

    Hello,

    Unfortunately, it is not possible to add an icon to each attribute in the product grid. If you want to add the icons to each category you can find the option in a category editing mode.

    Best Regards

    January 11, 2021 at 1:57 pm #257425

    wphone
    Participant

    I was looking at that after editing the attributes are only displayed in the product page and not also in the product list (both with grid and list). What else do I have to set to get the correct attribute display as in your demo?

    January 11, 2021 at 1:58 pm #257426

    wphone
    Participant

    sorry i forgot the attachments

    Attachments:
    You must be logged in to view attached files.
    January 11, 2021 at 2:16 pm #257430

    Artem Temos
    Keymaster

    You need to enable the following option in Theme Settings -> Shop -> Product styles https://prnt.sc/wl1h5m

    January 11, 2021 at 5:47 pm #257480

    wphone
    Participant

    Done, but it only works for the grid, not the list

    January 12, 2021 at 7:53 am #257580

    Artem Temos
    Keymaster

    Try to place the following file into the folder woodmart-child\woocommerce\content-product-list.php to add this for the list layout

    https://drive.google.com/file/d/1_R77vqh1upZlvCvztXStwOpFgT-I_OWc/view?usp=sharing

    January 12, 2021 at 4:30 pm #257773

    wphone
    Participant

    Ok now i see the attributes in the list almost like your example, I would just like to adjust the space between the list of attributes, but even with the help of the google console I didn’t quite understand where to change!

    Attachments:
    You must be logged in to view attached files.
    January 13, 2021 at 7:33 am #257913

    Bogdan Donovan
    Keymaster

    Hi,

    You can change space between attribute list items by adding the following code snippet to the Custom CSS area in Theme Settings.

    body .woocommerce-product-details__short-description table th,
body .woocommerce-product-details__short-description table td {
	padding-top: 10px;
	padding-bottom: 10px;
}

    Regards

    January 13, 2021 at 8:49 am #257943

    wphone
    Participant

    Thanks but the code doesn’t work, I also tried to set the padding value to 0 but it doesn’t change appearance

    Attachments:
    You must be logged in to view attached files.
    January 13, 2021 at 9:30 am #257954

    Bogdan Donovan
    Keymaster

    Hi,

    Sorry but we not quite understand what exactly you want to change and because of that we can’t properly check the custom code that we want to provide to you. Please, describe to us your problem in a bit more details and provide link to your site.

    Thank you in advance.

    January 13, 2021 at 1:12 pm #258054

    wphone
    Participant

    I apologize for the translation (google), I would just like to have the same effect as on your site (see attached screenshot), only the space (padding) between one attribute and the other is much larger than that in yours site (regardless of the number of attributes)

    Attachments:
    You must be logged in to view attached files.
    January 13, 2021 at 1:53 pm #258080

    wphone
    Participant

    I am afraid that there is something that does not “work” the custom css code, in fact I had a similar problem with other code that does not work, as shown in this topic

    January 13, 2021 at 2:16 pm #258091

    wphone
    Participant

    Look at the differences between your page and my page:
    The difference is only in the view as a list, in other cases it is the same as on your site

    January 13, 2021 at 3:16 pm #258117

    Bogdan Donovan
    Keymaster

    Try to add the following code snippet to the Custom CSS area in Theme Settings.

    .product-list-item table th,
.product-list-item table td {
	padding: 5px;
	border-bottom-style: dashed;
}

    Regards

    January 13, 2021 at 8:11 pm #258167

    wphone
    Participant

    That doesn’t work either.
    Fiddling with the google console I was able to find the padding that makes the list table have all that thickness

    td.woocommerce-product-attributes-item__value {
     padding: 0;
}
th.woocommerce-product-attributes-item__label {
     padding: 0;
}

    in fact, eliminating the padding and adding the code in Css Global does not go the same !!!
    I would like to understand if there is any problem in reading the custom css, something that conflicts

    Attachments:
    You must be logged in to view attached files.
    January 14, 2021 at 7:26 am #258270

    Bogdan Donovan
    Keymaster

    Hi,

    To make your product list attributes table visually the same as shown on our demo please try to first remove all other custom CSS code related to the attribute table and then add the following custom code from this reply (https://xtemos.com/forums/topic/pre-build-product-page-layout/#post-258117) to your Global Custom CSS area in Theme Settings

    .product-list-item table th,
.product-list-item table td {
	padding: 5px;
	border-bottom-style: dashed;
}

    This code was tested in your site and if it was applied correctly your product list attribute table will be look like shown on this screenshot https://prnt.sc/wn606r. If you paste this code in theme settings and nothing change, please leave it there and let us check if this code was pasted correctly and if there are any other conflicts.

    Best Regards

    January 14, 2021 at 8:44 am #258311

    wphone
    Participant

    I finally found the fatal mistake! Siteground’s SG optimizer plugin, as the code you gave me still didn’t work and couldn’t be true, I decided to deactivate all extraneous plugins and activate them one by one until I found the one that created conflict!
    Thanks for your patience and support

    January 14, 2021 at 8:52 am #258315

    Artem Temos
    Keymaster

    Great, you are welcome! Is there anything else that we might help you with?

    January 14, 2021 at 10:51 am #258342

    wphone
    Participant

    Not at the moment, thank you very much!

    January 14, 2021 at 12:06 pm #258371

    Artem Temos
    Keymaster

    You are welcome!

  • Author
    Posts
Viewing 24 posts - 1 through 24 (of 24 total)

The topic ‘Pre build product page layout’ is closed to new replies.