Hide Header and Footer on One Page

Add these codes to the Custom CSS box and click Save

Table of Contents

Desktop Only

/* Desktop Only */
@media screen and (min-width:768px) {
header#header, footer.sections {
  display: none;
}
}

/* Mobile Only */
@media screen and (max-width:767px) {
header#header, footer.sections {
  display: none;
}
}

/* Blog Page (list) */
[class*="type-blog"].view-list {
  header#header, footer.sections {
  display: none;
}
}

/* Blog Post */
[class*="type-blog"].view-item {
  header#header, footer.sections {
  display: none;
}
}

/* Event List */
[class*="type-event"].view-list {
  header#header, footer.sections {
  display: none;
}
}

/* Event Detail */
[class*="type-events"].view-item {
  header#header, footer.sections {
  display: none;
}
}

/* Shop/Category */
[class*="type-products"].view-list {
  header#header, footer.sections {
  display: none;
}
}

/* Individual Product */
[class*="type-products"].view-item {
  header#header, footer.sections {
  display: none;
}
}

/* Cart Page */
body#cart {
  header#header, footer.sections {
  display: none;
}
}

/* Homepage Only */
body.homepage {
  header#header, footer.sections {
  display: none;
}
}

/* Other pages - exclude homepage */
body:not(.homepage) {
  header#header, footer.sections {
  display: none;
}
}

Add this code to Page Header Code Injection and click Save

If you use a Personal Plan (doesn’t support Code Injection), you can add code to Code Block.

<style>
header#header {
  display: none !important;
}
footer.sections {
  display: none !important;
}
</style>