Different header and no top bar on the checkout page.

Hello @lunacer,

Thank you for reaching out,
How did you customize the theme?
The changes you made seem wrong to cause such an issue.

How can we replicate your steps to arrive at the issue on a fresh WordPress installation?
We need to know how we can recreate it somewhere other than your website, then we can provide a solution to solve it.

________

Since you may have many customizations in your website’s child theme, please follow the steps below to recheck your issue and let us know the results.

Troubleshooting child theme:
1- Remove all customization on the child theme.
2- add your customization one by one to the child theme.
3- After adding each customization code, check your issue

Note 1: In the staging website, if you have a cache plugin or server cache, You need to clear its cache contents or disable them.

Note 2: Please get a full backup from your website before removing all customization.

I hope it helps.
Best Regards

Hi @skalanter,
Thank you for your reply.

I didn’t make a big change to the theme. It’s mostly CSS modification. I will add the custom details below.

Additionally, today, I found the modification of the WooCommerce Checkout page settings doesn’t apply to the page.
I tried to deactivate the ‘MULTI-STEP CHECKOUT’ by uncheck the option in
Appearance > Customizing > WooCommerce > Checkout, but it doesn’t make changes on the checkout page.

1. The right side two buttons(profile, cart) are added from Appearance > Customizing > Header > General > Content After Header.
And [my_account_button] is my custom shortcode

function my_account_button_shortcode() {
$my_account_url = get_permalink( wc_get_page_id( 'myaccount' ) );
$button_text = '';
$button_html = '' . $button_text . '';

return $button_html;
}

add_shortcode('my_account_button', 'my_account_button_shortcode');

2. I moved the main menu of the header to the side with CSS.
Following is the CSS customized part:

/* Global */
h1,
h2,
h3,
h4,
h5,
h6,
p {
  -ms-word-break: keep-all !important;
  word-break: keep-all !important;
}

#content-wrap {
  padding-top: 200px;
}


/* [ General ] */
/* header */
#site-header.transparent-header {
  height: 104px;
  z-index: 0;
  margin: 0 auto;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* language switcher */
.trp_language_switcher_shortcode {
  display: inline-block;
}
.trp-language-switcher {
	width: unset;
}

/* my account button icon */
.my_account_button:before {
	content: '\f007';
	font-family: "Font Awesome 6 Free";
	margin-left: 0;
	margin-right: 5px;
}

/* cart button icon */
.count-item:before {
	content: '\f07a';
	font-family: "Font Awesome 6 Free";
	margin-left: 0;
	margin-right: 5px;
}

/* cart button count */
div.woo-menu-icon.woo-cart-shortcode .wcmenucart-count {
	border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* hide WooCommerce mini cart */
.owp-mini-cart{
	display: none;
}
.current-shop-items-dropdown {
	display: none;
}


/* Main menu move to side */

/* responsive menu: side main menu => collapsed menu button */
@media only screen and (min-width: 960px) {
	#site-navigation {
		z-index: 11;
		position: fixed;
		top: 30vh;
		bottom: unset;
		right: unset;
		left: 0px;
		padding: 0px 0px 0px 5vw;
		margin: 0;
	}
	#site-navigation-wrap .dropdown-menu{
		display: flex;
		flex-direction: column;		
	}
}

/* Active page on the menu */
.current-menu-item .current_page_item {
  color: #007545
}

/* remove underline from button text */
.single-post:not(.elementor-page) .entry-content a:not(.wp-block-button__link):not(.wp-block-file__button),
.page:not(.elementor-page):not(.woocommerce-page) .entry a:not(.wp-block-button__link):not(.wp-block-file__button) {
  text-decoration: none;
}


/* [ Landing page ] */
/* Top section text */
.landing_main_text {
  color: #007545;
  font-family: 'Black Han Sans';
  font-size: 70px;
}

/* [ Post list page] */
.ymc-smart-filter-container .container-posts .post-layout1 .ymc-post-layout1 .read-more .btn,
.ymc-extra-filter .container-posts .post-layout1 .ymc-post-layout1 .read-more .btn,
.ymc-extra-search .container-posts .post-layout1 .ymc-post-layout1 .read-more .btn,
.ymc-extra-sort .container-posts .post-layout1 .ymc-post-layout1 .read-more .btn {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: transparent no-repeat;
  font-size: 0;
}


/* [ Post single page] */
/* Post Header  */
#main>div.ocean-single-post-header.single-post-header-wrap.single-header-ocean-2.sh-container>div>div>header>h1 {
  font-size: 29px;
  font-weight: 300;
  font-family: unset;
  margin-top: 150px;
}

#main>div.ocean-single-post-header.single-post-header-wrap.single-header-ocean-2.sh-container>div>div>header>div.blog-post-breadcrumbs {
  display: none;
}

#main>figure {
  display: none;
}

/* [ Shop: WooCommerce ] */
/* Product images slider */
.woocommerce div.product div.images .flex-control-nav.flex-control-thumbs {
  overflow-x: scroll; /* Enable horizontal scrolling */
  display: flex; /* Arrange items in a row */
  white-space: nowrap; /* Prevent line breaks between items */
}

.woocommerce div.product div.images .flex-control-nav.flex-control-thumbs li:nth-child(4n) {
  margin-right: 15px; /* Add spacing between thumbnails */
}

.woocommerce div.product div.images .flex-control-nav.flex-control-thumbs li {
  margin-right: 15px; /* Add spacing between thumbnails */
}

.woocommerce div.product div.images .flex-control-nav.flex-control-thumbs li img {
  max-width: 100px;
  height: auto;
}

/* Adjust slider scrollbar appearance */
.woocommerce div.product div.images .flex-control-nav.flex-control-thumbs::-webkit-scrollbar {
  width: 5px;
  height: 3px;
}

.woocommerce div.product div.images .flex-control-nav.flex-control-thumbs::-webkit-scrollbar-thumb {
  background: #ccc; /* Scrollbar color */
}

Thanks,

Hello @lunacer,

Thank you for reaching out,

Regarding the header customization, please follow the steps explained in this link: https://docs.oceanwp.org/article/355-how-to-create-a-custom-header.

Regarding the code you’ve shared, the PHP part is correct. But since you didn’t add any content, it returns empty content. So edit it to return the content you want.
I’ve checked it and didn’t see any issue: https://postimg.cc/CR9Dw99d.

Regarding the checkout page, please explain your issue, including screenshots, other URLs, and any other document, so we can better understand and check it.
You can upload your files to one of the following online services:
https://postimages.org
https://drive.google.com
https://dropbox.com
Or any other service you know.

Best Regards

Thank you for your advice, I could add the header by setting it with the custom header.
However, the footer still does not added to the checkout page even though I’m using the custom footer already.

Cart page shows the footer, but not in the Checkout page.

• This reply was modified 7 months ago by lunacer.

Hello @lunacer,

Thank you for reaching out,

If you don’t have any customizations with code that affects the checkout page, we have two features in two different places in our theme that you may have accidentally enabled, and you won’t see the footer on the checkout page.
You can check these:

1. Under the checkout page > at the top right, click the “O” icon, aka OceanWP Settings > Footer, and ensure it’s enabled: https://postimg.cc/V5kT7NX1.

2. Under the Customizer > WooCommerce > Checkout, ensure you disabled the “Distraction Free Checkout” option: https://postimg.cc/qN16xjrp.

I hope it helps.
Best Regards

It is resolved now! The cause was the “Distraction Free Checkout” option.
Thank you so much for your assistance.