bbarinaga 4 Share Posted October 30, 2020 Site URL: https://mistoa.mx/lavabos/p/lavabo-brava web: https://mistoa.mx/lavabos/p/lavabo-brava pasword: 1234 Hello, I hope someone can help me. I’ve managed to insert Additional information in Product’s main section using markdown and the following codes: HEADER <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> FOOTER <script> $(document).ready(function() { $('.ProductItem-additional .markdown-block').insertAfter('.ProductItem-details-excerpt'); }); </script> It looks great on desktop, however, it’s all messed up on mobile (please see screenshot) and I haven’t been able to change the order. I’d like to have the same order on mobile: 1) Name 2) Price 3) Product Description 4) Additional Info (Mark 5) Color, Quantity (Ideally on the same line) 6) Add to cart I appreciate any help!! Link to post
0 AlexBillerey 4 Share Posted October 30, 2020 You are on the right lines I think. Take a look at you css @ line 14(ish):.ProductItem-details .ProductItem-product-price { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; margin-bottom: 25px; display: block; } changing above code to this (i.e. removing the order declaration (and it's browser vendor prefixes)): .ProductItem-details .ProductItem-product-price { margin-bottom: 25px; display: block; } The result is this: The next thing to do is the re-ordering of the next 3 sections, SELLADO, PIGMENTACIÓN and ENVÍO Having looked at your html code I can see that there are 3 <h4> each followed by hidden <p> and <ul> and <li> tags with additional info. (Very nice accordian effect BTW 🙂 ). In order to change the order of the <h4> tags and it's subsequent other tags, I would suggest wrapping each set of <h4>,<p><ul> and <li> tags in a div. However I just tried this and it breaks the accordian, though if you are happy to tweak the jquery it should work. Alternatively I suppose give an orer value to each <h4>, <p> etc within the parent <div class="sqs-block-content"> tag but this seems somewhat laborious 😞 Good luck!! bbarinaga 1 Link to post
0 bbarinaga 4 Author Share Posted November 3, 2020 Thank you so much for taking the time to check this, @AlexBillerey Link to post
0 AlexBillerey 4 Share Posted November 3, 2020 1 hour ago, bbarinaga said: Thank you so much for taking the time to check this, @AlexBillerey Happy to help bbarinaga 1 Link to post
Question
bbarinaga 4
Site URL: https://mistoa.mx/lavabos/p/lavabo-brava
web: https://mistoa.mx/lavabos/p/lavabo-brava
pasword: 1234
Hello,
I hope someone can help me.
I’ve managed to insert Additional information in Product’s main section using markdown and the following codes:
HEADER
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
FOOTER
<script>
$(document).ready(function() {
$('.ProductItem-additional .markdown-block').insertAfter('.ProductItem-details-excerpt');
});
</script>
It looks great on desktop, however, it’s all messed up on mobile (please see screenshot) and I haven’t been able to change the order.
I’d like to have the same order on mobile:
1) Name
2) Price
3) Product Description
4) Additional Info (Mark
5) Color, Quantity (Ideally on the same line)
6) Add to cart
I appreciate any help!!
Link to post
Top Posters For This Question
2
2
Popular Days
Oct 30
2
Nov 3
2
Top Posters For This Question
bbarinaga 2 posts
AlexBillerey 2 posts
Popular Days
Oct 30 2020
2 posts
Nov 3 2020
2 posts
Popular Posts
AlexBillerey
You are on the right lines I think. Take a look at you css @ line 14(ish): .ProductItem-details .ProductItem-product-price { -webkit-box-ordinal-group: 1; -moz-box-ordinal-gro
AlexBillerey
Happy to help
Posted Images
3 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment