Centrer un moteur de recherche dans le template store front avec woocommerce

Version imprimable

Bonjour,

J'utilise wordpress pour créer un site de e-commerce. J'ai installer woocommerce et utilise store Front.
je souhaiterais modifier mon entête dans le template Store Front. je voudrais voir le moteur de recherche centré sur la page en dessous du logo avec le panier sur la droite. Comment fait-on ?
Faut-il aller dans le fichier Header.php ?

Voici le code du fichier :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<?php
/**
 * The header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="content">
 *
 * @package storefront
 */
 
?><!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
 
<?php wp_head(); ?>
</head>
 
<body <?php body_class(); ?>>
 
<?php do_action( 'storefront_before_site' ); ?>
 
<div id="page" class="hfeed site">
	<?php do_action( 'storefront_before_header' ); ?>
 
	<header id="masthead" class="site-header" role="banner" style="<?php storefront_header_styles(); ?>">
 
		<?php
		/**
		 * Functions hooked into storefront_header action
		 *
		 * @hooked storefront_header_container                 - 0
		 * @hooked storefront_skip_links                       - 5
		 * @hooked storefront_social_icons                     - 10
		 * @hooked storefront_site_branding                    - 20
		 * @hooked storefront_secondary_navigation             - 30
		 * @hooked storefront_product_search                   - 40
		 * @hooked storefront_header_container_close           - 41
		 * @hooked storefront_primary_navigation_wrapper       - 42
		 * @hooked storefront_primary_navigation               - 50
		 * @hooked storefront_header_cart                      - 60
		 * @hooked storefront_primary_navigation_wrapper_close - 68
		 */
		do_action( 'storefront_header' ); ?>
 
	</header><!-- #masthead -->
 
	<?php
	/**
	 * Functions hooked in to storefront_before_content
	 *
	 * @hooked storefront_header_widget_region - 10
	 * @hooked woocommerce_breadcrumb - 10
	 */
	do_action( 'storefront_before_content' ); ?>
 
	<div id="content" class="site-content" tabindex="-1">
		<div class="col-full">
 
		<?php
		do_action( 'storefront_content_top' );

Voici le lien vers la page d'accueil actuelle : ici

Merci de votre aide et réponse.
Pasquinelle

Voici le code modifié du fichier :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<?php
/**
 * The header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="content">
 *
 * @package storefront
 */
 
?><!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
 
<?php wp_head(); ?>
 
<style>
.woocommerce-product-search{
margin: 20px auto;
}
</style>
</head>
 
<body <?php body_class(); ?>>
 
<?php do_action( 'storefront_before_site' ); ?>
 
<div id="page" class="hfeed site">
    <?php do_action( 'storefront_before_header' ); ?>
 
    <header id="masthead" class="site-header" role="banner" style="<?php storefront_header_styles(); ?>">
 
        <?php
        /**
         * Functions hooked into storefront_header action
         *
         * @hooked storefront_header_container                 - 0
         * @hooked storefront_skip_links                       - 5
         * @hooked storefront_social_icons                     - 10
         * @hooked storefront_site_branding                    - 20
         * @hooked storefront_secondary_navigation             - 30
         * @hooked storefront_product_search                   - 40
         * @hooked storefront_header_container_close           - 41
         * @hooked storefront_primary_navigation_wrapper       - 42
         * @hooked storefront_primary_navigation               - 50
         * @hooked storefront_header_cart                      - 60
         * @hooked storefront_primary_navigation_wrapper_close - 68
         */
        do_action( 'storefront_header' ); ?>
 
    </header><!-- #masthead -->
 
    <?php
    /**
     * Functions hooked in to storefront_before_content
     *
     * @hooked storefront_header_widget_region - 10
     * @hooked woocommerce_breadcrumb - 10
     */
    do_action( 'storefront_before_content' ); ?>
 
    <div id="content" class="site-content" tabindex="-1">
        <div class="col-full">
 
        <?php
        do_action( 'storefront_content_top' );

06/06/2018, 09h38
bebertweb92

Pas de changement

Bonjour, Grand merci pour votre aide.

Cependant, je ne vois pas de changement. J'ai bien remplacé le code initial par votre code modifié dans le fichier header.php accessible via wp-content/themes/storefront. Est ce que je dois faire autrement ou une action supplémentaire ?

merci de votre réponse ;)
06/06/2018, 09h46
miss_socrates
Oui, c'est un fichier php.
Il faudrait essayer en mettant le code suivant dans le fichier style.css (à trouver sur fillezilla):
Code:

1 2 3 4 .woocommerce-product-search{ margin: 20px auto; }
06/06/2018, 09h54
bebertweb92

centré le moteur de recherche

Merci mais toujours rien. C'est bien dans le fichier header.php qui fallait mettre le code ?
07/06/2018, 00h59
miss_socrates

non, il faut placer le code dans le fichier style.css !
07/06/2018, 02h14
bebertweb92

Centrer un moteur de recherche dans le template store front avec woocommerce
Merci de ta réponse .
Pour compléter ta réponse, j'ai inséré dans le fichier functions.php le code suivant :
Code:

1 2 3 4 /** pour deplacer le moteur de recherche */ remove_action( 'storefront_header', 'storefront_product_search', 50 ); add_action( 'storefront_header', 'storefront_product_search', 46 );
et mon css est désormais le suivant :
Code:

1 2 3 /* SEARCH BAR */ .site-header .site-search { width: 60% !important; margin: 20px auto; /* Use px values if you want, eg. 350px */ } }
Voici le résultat ICI

Cependant, je n'arrive pas à mettre complètement le moteur de recherche au milieu. Quel code CSS il faut utiliser ?

Je souhaiterais aussi que le panier se trouve à droite du moteur de recherche sur la même ligne et rajouter un bouton rechercher.

Merci de ton aide
08/06/2018, 02h07
bebertweb92

Personne pour me répondre ?