Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. Shop / WooCommerce
  3. Urgent: stuck with product styling, please help

Urgent: stuck with product styling, please help

Scheduled Pinned Locked Moved Shop / WooCommerce
9 Posts 3 Posters 320 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • B Offline
    B Offline
    Bella
    wrote on Mar 2, 2022, 4:12 PM last edited by Bella Mar 2, 2022, 11:23 AM
    #1

    Hello,
    please answer soon, I am still stuck with styling the single product. The widths and sizes are totally off.

    When I make the browser window smaller at a size of about 1000px width the product looks fine. However in the "original" full browser size I only see about half or less of the product shot (portrait/vertical orientation). There is no way to view the full image, only parts of it, and I have to scroll way down (to the bottom of the image) to "discover" the carousel slider bottom. And the product description is way to narrow even though there is so much empty space on the right of the description. I tried changing this in the customizer Woocommerce spaces but the space to the right never gets filled.

    For reference: I would like for the product page to look about like in the first screenshot (where I changed the browser width to about 1000px.)
    So for the whole picture and the carousel option to be visible without scrolling, and for the textfield to be wider.
    Maybe it won't be possible that all of the text is visible without scrolling, that's fine, but the buyer has to be able to see the whole image and also, to see immediately that there are more product shots, without having to scroll way down.

    The second and third screenshot are how it looks now, without changing the browser size in any way.

    Here's the product link:
    https://rosereichart.com/product/compassion-i/

    And just as a note: I'm having the same issue with my test product (image being bigger than the screen --> only half of the photo visible) but there is a way shorter text. So it doesn't seem to have anything to do with the length of the text either.
    https://rosereichart.com/product/test/

    Please help! Thank you!

    Bildschirmfoto-2022-03-02-um-16.58.10.jpg Bildschirmfoto-2022-03-02-um-16.56.39.jpg Bildschirmfoto-2022-03-02-um-16.56.24.jpg

    B 1 Reply Last reply Mar 2, 2022, 7:17 PM
    0
    • B Bella
      Mar 2, 2022, 4:12 PM

      Hello,
      please answer soon, I am still stuck with styling the single product. The widths and sizes are totally off.

      When I make the browser window smaller at a size of about 1000px width the product looks fine. However in the "original" full browser size I only see about half or less of the product shot (portrait/vertical orientation). There is no way to view the full image, only parts of it, and I have to scroll way down (to the bottom of the image) to "discover" the carousel slider bottom. And the product description is way to narrow even though there is so much empty space on the right of the description. I tried changing this in the customizer Woocommerce spaces but the space to the right never gets filled.

      For reference: I would like for the product page to look about like in the first screenshot (where I changed the browser width to about 1000px.)
      So for the whole picture and the carousel option to be visible without scrolling, and for the textfield to be wider.
      Maybe it won't be possible that all of the text is visible without scrolling, that's fine, but the buyer has to be able to see the whole image and also, to see immediately that there are more product shots, without having to scroll way down.

      The second and third screenshot are how it looks now, without changing the browser size in any way.

      Here's the product link:
      https://rosereichart.com/product/compassion-i/

      And just as a note: I'm having the same issue with my test product (image being bigger than the screen --> only half of the photo visible) but there is a way shorter text. So it doesn't seem to have anything to do with the length of the text either.
      https://rosereichart.com/product/test/

      Please help! Thank you!

      Bildschirmfoto-2022-03-02-um-16.58.10.jpg Bildschirmfoto-2022-03-02-um-16.56.39.jpg Bildschirmfoto-2022-03-02-um-16.56.24.jpg

      B Offline
      B Offline
      Bella
      wrote on Mar 2, 2022, 7:17 PM last edited by
      #2

      @Richard @arminunruh
      The carousel won't work either and I have no idea why. The gallery images are uploaded in the backend and the dots show up but can't be clicked.

      Also the product description text seems to be displayed as an image, not as text? Why ist this? Then all of the written text won't be of use for SEO, won't it?

      I have tried fixing the text width issue with changing the width manually in css to a min-width of the vw but since I have no idea what I'm doing now when changing the browser width it sometimes runs out of of the visible browser. Not ideal either.
      Please help.

      I'm also really hoping for the option of using the gridder to design a product, as already mentioned by a few other lay theme users.

      Thank you!

      1 Reply Last reply
      0
      • R Offline
        R Offline
        Richard
        Global Moderator
        wrote on Mar 3, 2022, 3:13 AM last edited by Richard Mar 2, 2022, 10:33 PM
        #3

        Dear @Bella

        Have replied via this thread too:

        http://laythemeforum.com:4567/topic/7691/woocommerce-carousel/2

        First Question:
        Woocommerce "Spaces" in Customizer can help with that:

        Screen Shot 2022-03-03 at 4.28.33 PM.png

        Custom CSS is needed i think Bella. Will forward to Armin as feedback ✅


        Question 2:

        "Also the product description text seems to be displayed as an image, not as text?"

        I cant recreate the Bug sorry, product description's are text for me running

        Wordpress: 5.9.1
        Lay Theme: 4.2.2
        Woo-commerce: 6.2.1

        Screen Shot 2022-03-03 at 3.58.40 PM.png
        Screen Shot 2022-03-03 at 4.01.45 PM.png

        Your Website (possibly you are referring to the decriptions in the product thumbnails page):
        Screen Shot 2022-03-03 at 4.10.04 PM.png

        If the following is confirmed:

        Wordpress, Lay Theme & Laytheme's Addons are all up to date ?

        Any custom CSS or JS that may interfere is temporarily removed.

        Any third-party plugins are temporarily deactivated.

        And bug still occurring:

        Please send your website address, /wp-admin/ username and password and a link to this topic to info@laytheme.com?


        Thanks for the feedback, have forwarded ✅

        "I'm also really hoping for the option of using the gridder to design a product, as already mentioned by a few other lay theme users."


        Best ✨
        Richard
        B 1 Reply Last reply Mar 3, 2022, 11:34 AM
        0
        • R Richard
          Mar 3, 2022, 3:13 AM

          Dear @Bella

          Have replied via this thread too:

          http://laythemeforum.com:4567/topic/7691/woocommerce-carousel/2

          First Question:
          Woocommerce "Spaces" in Customizer can help with that:

          Screen Shot 2022-03-03 at 4.28.33 PM.png

          Custom CSS is needed i think Bella. Will forward to Armin as feedback ✅


          Question 2:

          "Also the product description text seems to be displayed as an image, not as text?"

          I cant recreate the Bug sorry, product description's are text for me running

          Wordpress: 5.9.1
          Lay Theme: 4.2.2
          Woo-commerce: 6.2.1

          Screen Shot 2022-03-03 at 3.58.40 PM.png
          Screen Shot 2022-03-03 at 4.01.45 PM.png

          Your Website (possibly you are referring to the decriptions in the product thumbnails page):
          Screen Shot 2022-03-03 at 4.10.04 PM.png

          If the following is confirmed:

          Wordpress, Lay Theme & Laytheme's Addons are all up to date ?

          Any custom CSS or JS that may interfere is temporarily removed.

          Any third-party plugins are temporarily deactivated.

          And bug still occurring:

          Please send your website address, /wp-admin/ username and password and a link to this topic to info@laytheme.com?


          Thanks for the feedback, have forwarded ✅

          "I'm also really hoping for the option of using the gridder to design a product, as already mentioned by a few other lay theme users."


          Best ✨
          Richard
          B Offline
          B Offline
          Bella
          wrote on Mar 3, 2022, 11:34 AM last edited by
          #4

          @Richard
          Hello Richard, thanks for the reply, unfortunately it didn't help at all this time.
          As I have said before, I've tried working with the "spaces" in the customizer but this changes nothing.
          The image is still higher than the browser and thus not visible fully.
          Also the text is unaffected by changing the spaces too. It's still very narrow (unless I add the css but as I said this brings new issues).
          So the customizer doesn't work for this.

          Everything is up to date.

          Also for the text/image issue, yes, the line that you marked is the only thing that's text. That's because it's not the product description but the product short description which is filled in in the backend in a different text field.
          Everything below this is the full product description and only shows up as an image.

          The carousel is swipeable, which on the mobile makes sense but on desktop with the dots below that are not clickable it's very confusing. To me, it would make sense to click on them or click on the image for it to change. Not to have to drag it with the mouse. That seems very unintuitive to me.

          Please tell me how to fix this!
          The most urgent thing for me right now is that the photo should be visible fully, and not only the upper half.
          Thanks.

          1 Reply Last reply
          0
          • arminunruhA Offline
            arminunruhA Offline
            arminunruh
            Global Moderator
            wrote on Mar 4, 2022, 12:49 PM last edited by
            #5

            hello!

            Screenshot 2022-03-04 at 13.47.08.png

            Please update Lay Theme.
            Now in customize -> woocommerce -> single product you have new options:

            • image width
            • space left
            • text width
            • make text sticky (turn off)

            these settings should help with the layout you'd like to achieve

            B 1 Reply Last reply Mar 8, 2022, 10:30 PM
            0
            • R Offline
              R Offline
              Richard
              Global Moderator
              wrote on Mar 7, 2022, 10:24 PM last edited by
              #6
              @Bella @arminunruh

              Amazing thanks Armin! 💥

              1 Reply Last reply
              0
              • arminunruhA arminunruh
                Mar 4, 2022, 12:49 PM

                hello!

                Screenshot 2022-03-04 at 13.47.08.png

                Please update Lay Theme.
                Now in customize -> woocommerce -> single product you have new options:

                • image width
                • space left
                • text width
                • make text sticky (turn off)

                these settings should help with the layout you'd like to achieve

                B Offline
                B Offline
                Bella
                wrote on Mar 8, 2022, 10:30 PM last edited by
                #7

                @arminunruh thanks so much for helping with this! The customizer definitely helps now.

                I notice that the headline and the short product description still has a very confined width. For example the headline can only be about two words, before it already moves into the next line, and something similar happens with the subhead/short product description.

                Maybe for the next update this could be customizable too, but definitely not as urgent as the last issue :)

                Thanks again!

                1 Reply Last reply
                1
                • R Offline
                  R Offline
                  Richard
                  Global Moderator
                  wrote on Mar 9, 2022, 9:02 PM last edited by
                  #8

                  Thanks for the feedback @Bella will forward ✅
                  Have a wonderful day & thank you for supporting Lay Theme!

                  1 Reply Last reply
                  0
                  • arminunruhA Offline
                    arminunruhA Offline
                    arminunruh
                    Global Moderator
                    wrote on Apr 26, 2022, 1:38 PM last edited by
                    #9

                    hey i looked into this and the positioning of the vimeo video affects in the fullscreen state still.
                    however, i cant find a way to fix this for safari sorry

                    1 Reply Last reply
                    1
                    Reply
                    • Reply as topic
                    Log in to reply
                    • Oldest to Newest
                    • Newest to Oldest
                    • Most Votes


                    I also code custom websites or custom Lay features.
                    💿 Email me here: 💿
                    info@laytheme.com

                    Before you post:
                    1. When using a WordPress Cache plugin, disable it or clear your cache.
                    2. Update Lay Theme and all Lay Theme Addons
                    3. Disable all Plugins
                    4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                    This often solves issues you might run into

                    When you post:
                    1. Post a link to where the problem is
                    2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                    3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                    Online Users
                    C
                    craigfeldspar
                    16 minutes ago
                    Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                    laytheme.com
                    • Login

                    • Don't have an account? Register

                    • Login or register to search.
                    • First post
                      Last post
                    0
                    • Recent
                    • Tags
                    • Popular
                    • Users
                    • Search