Background image – shop page

Hi there,

I’ve been trying to change the background on the shop page with an image but I don’t understand how to do it. I’ve changed it already in all the pages applying the code below, but it doesn’t work in the shop page. Could you please help me with it?

.page .main-page-wrapper {
background-repeat: repeat;
background-attachment: scroll;
background-image: url(https://phoenixcareuk.co.uk/wp-content/uploads/2019/11/k-background2.jpg);
}

Many thanks,
Matt

Hi there, sorry for the double message. I’ve attached the link of my website in the previous message, could you please check it and let me know why it’s not showing the login/register item next to cart? If that header doesn’t support it, could you please provide the code to add it there?

Thanks for your time,
Matt

Hello,

It is not possible to attach the background image to the shop page only. If I provide CSS code, it will be applied to all the templates of eCommerce: categories pages, product pages etc.

body.woocommerce .main-page-wrapper {
background-repeat: repeat;
background-attachment: scroll;
background-image: url(https://phoenixcareuk.co.uk/wp-content/uploads/2019/11/k-background2.jpg);
}

By default, this header layout doesn’t have Login/Register link. But you can add it manually placing the following code snippet to the functions.php file in the child theme.

add_filter( 'basel_header_configuration', 'basel_custom_header_configuration', 1, 1 );

function basel_custom_header_configuration() {

	return array(
		'container' => array(
			'wrapp-header' => array(
				'logo',
				'widget_area',
				'right-column' => array(
					'header_links',
					'search',
					'wishlist',
					'cart',
					'mobile_icon',
				)
			)
		),
		'navigation-wrap' => array(
			'container' => array(
				'main_nav'
			)
		)	
	);
}

Best Regards

Hi,

That code is changing completely the header. I can do the same from the back-end without using the code provided. Could you please read again my request and let me know. Thank you

Hello,

It is not possible to apply the background on the shop page with an image. The image will be applied to all the pages.

Best Regards

My reply is about the HEADER and not the background. Regarding the background, it’s impossible that I cannot change it, there must be a way to do it editing the code, nothing it’s impossible designing websites. I just thought that contacting you, would be quicker to understand what to edit, you should know where to touch if you have developed the all theme. Never mind, I find a solution by my own.

Could you please help at least on adding the login/register to my current header? You’ve provided a cod that changes completely the header, which it’s not what I’m looking for.

Thanks

Hello,

You did not mention the header before. You told about the shop page background.

Please add this code to the Theme Settings > Custom CSS > Global:

.main-header, .sticky-header.header-clone, .header-spacing {
    background-repeat: repeat;
    background-attachment: scroll;
    background-image: url(https://phoenixcareuk.co.uk/wp-content/uploads/2019/11/k-background2.jpg);
}

Change the image URL as per your needs.

If you want to change it only on the shop pate, add this code to the page settings of the shop page.

Best Regards

Hi Elise,

We are in the different boat. I don’t need to change the background image in the header (I never wrote that) but only in the shop page. You’ve said that it’s not possible to change the background only in the shop page and I said that I will a solution if you can’t find it.

My second request was adding login/register to the current header. The code you’ve provided didn’t add the field “login/register” on my header but it replaced completely the header with a different one. Is there anything you can do to help? Please let me know if you need me to clarify more.

Thank you,
Matt

Hello,

As for the background for the shop page only: try to add custom CSS to the Page settings:

body.woocommerce .main-page-wrapper {
background-repeat: repeat;
background-attachment: scroll;
background-image: url(https://phoenixcareuk.co.uk/wp-content/uploads/2019/11/k-background2.jpg);
}

As for the login/Register on the header Please provide your site admin access I will check the settings.

Best Regards

[Author]

Posts