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

**bebertweb92** · 05/06/2018, 17h50

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**miss_socrates** · 06/06/2018, 04h18

Voici le code modifié du fichier :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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' );

**bebertweb92** · 06/06/2018, 09h38

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

**miss_socrates** · 06/06/2018, 09h46

Oui, c'est un fichier php.
Il faudrait essayer en mettant le code suivant dans le fichier style.css (à trouver sur fillezilla):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
.woocommerce-product-search{
margin: 20px auto;
}

**bebertweb92** · 06/06/2018, 09h54

Merci mais toujours rien. C'est bien dans le fichier header.php qui fallait mettre le code ?

**miss_socrates** · 07/06/2018, 00h59

non, il faut placer le code dans le fichier style.css !

**bebertweb92** · 07/06/2018, 02h14

Merci de ta réponse .
Pour compléter ta réponse, j'ai inséré dans le fichier functions.php le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**bebertweb92** · 08/06/2018, 02h07

Personne pour me répondre ?

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

WordPress PHP

Discussions similaires

Partager

Partager