Hello Andre,
Thank you for using Sinatra theme!
The easiest way to modify the search results layout is with CSS code.
Try adding the following CSS code into Customize » Additional CSS:
.search-results #content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.search-results #content .sinatra-article {
width: 50%;
}
.search-results #content .si-blog-entry-content {
margin: 15px;
}
As for adding the currency switcher in the main header, you would have to use a child theme and in that child theme’s functions.php you can add something like this:
add_action( 'sinatra_header_widget_location', 'si_custom_widget' );
function si_custom_widget( $position ) {
if ( 'right' === $position ) {
echo '<div class="si-header-element">';
echo do_shortcode( '[currency_switcher]' );
echo '</div>';
}
}
-
This reply was modified 4 years ago by
hzlateska.
Let me know if that worked for you.
-
This reply was modified 4 years ago by hzlateska.
Hello Hzlateska,
Yes it works Thank you, but when there are many results i get all products in one row. Is there a setting to divide it in to more rows?
And also for tablet and mobile the nr. of products in a row needs to be less.
I need some time for the child theme, never did it before but i will find out.
Greetings
Hey,
Can you share the page link where I can see how this works on your site?
Sure, i did not have time to make a child theme though.
Search for Opal, the site is :
https://www.phoenix-galerie.com
Try using this CSS code instead of the one I sent previously:
.search-results #content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.search-results #content .sinatra-article {
width: 25%;
}
.search-results #content .si-blog-entry-content {
margin: 15px;
}
-
This reply was modified 4 years ago by hzlateska.
Thank you so much 🙂
It is much better, but i think for the tablet mode it has too much results on one row and for mobile i think the original is good. so 1 result in a row.
Hi,
i just added a child theme, The Php code for the currency switcher does not seem to do anything ?
Is it possible to alter the last css code so i get 1 result a row for mobile and 2 for tablet and 4 for desktop ?
Hey @phoenixgalerie
The following CSS code will do that – 1 result per row on mobile devices, 2 on tablets and 4 on everything else:
.search-results #content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.search-results #content .sinatra-article {
width: 25%;
}
@media screen and (max-width: 480px) {
.search-results #content .sinatra-article {
width: 100%;
}
}
@media screen and (min-width: 481px) and (max-width: 768px) {
.search-results #content .sinatra-article {
width: 50%;
}
}
.search-results #content .si-blog-entry-content {
margin: 15px;
}
As for the currency switcher, depending on the currency switcher plugin you are using you need to change the shortcode currency_switcher (assuming the currency switcher plugin provides a shortcode).
Thanks!
Thank you that works perfectly !
I don’t know about shortcode, it is all new to me.
I was trying to find out which plugin you are using and it seems that this shortcode should do the trick: woocs.
Your functions.php code should look like this:
add_action( 'sinatra_header_widget_location', 'si_custom_widget' );
function si_custom_widget( $position ) {
if ( 'right' === $position ) {
echo '<div class="si-header-element">';
echo do_shortcode( '[woocs]' );
echo '</div>';
}
}
If that did not help, you can try to contact the currency switcher plugin developer and they will let you know which shortcode you can use.
The short code is correct but it does noet work, i googled on the shortcode and found this piece of code on their site:
<?php echo do_shortcode(‘[woocs show_flags=0 txt_type=”desc” style=2]’); ?>
I placed it in the header.php and it displays the currency switcher in the header now but in the wrong place, it’s not very bad but i would rather have it next to the search bar.
<?php do_action( ‘sinatra_before_masthead’ ); ?>
<header id=”masthead” class=”site-header” role=”banner”<?php sinatra_schema_markup( ‘header’ ); ?>>
<?php do_action( ‘sinatra_header’ ); ?>
<?php do_action( ‘sinatra_page_header’ ); ?>
<?php echo do_shortcode(‘[woocs show_flags=0 txt_type=”desc” style=2]’); ?>
</header><!– #masthead .site-header –>
<?php do_action( ‘sinatra_after_masthead’ ); ?>
<?php do_action( ‘sinatra_before_main’ ); ?>
<div id=”main” class=”site-main”>
The currency converter is still not completely where i would like it, would it be possible to change its location to next to the search bar?
The last part is solved also, i found a way on the woocommerce page to create a menu with a small short code plugin, i will copy the link below
https://currency-switcher.com/how-to-drop-woocommerce-currency-switcher-in-menu/
Thank you for your help !
